Как анимировать, когда нажмите класс или идентификатор с помощью CSS3?

Question

Как анимировать, когда нажмите класс или идентификатор с помощью CSS3?

0

Я изучаю css3, теперь я могу запустить анимацию в открывшемся окне, но мне нужно, если я нажму на какой-либо класс или идентификатор, тогда только он будет оживлять, пожалуйста, кто-нибудь мне поможет

<html>

        <div id="test"  class="target animate">Try me</div>

            <div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click here</h3></div>




            <style>


            #test {
                width:160px;
                height:200px;
                margin: 100px;
                background:#68C6F2;

                -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;    
                -ms-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;    
                transition: all 1s ease-in-out;
            }

            #test.animate {
                -moz-animation-name: test;
                -moz-animation-duration: 1s;
            }

            @keyframes test{
                from { -moz-transform: translateX(-100%) scale(.1) rotateY(-50deg);}
            }

            </style>
</html>

Я использую браузер Firefox, хорошо работаю, но мне нужно, если я нажму на какой-либо класс или идентификатор, тогда только он будет оживлять, кто-нибудь мне поможет (или вы можете сказать мне, как использовать jquery, это очень полезно для меня) спасибо

user2717260 26 сен. 2013, в 13:17

Источник

Теги:

jquery

css3

1 ответ

Ещё вопросы

Deep Sharma · Answer 1 · 2013-09-26T07-47-00.000Z

Я ответил и на другого человека. я думаю, ваш проспект тоже такой же.

хорошо, я не думаю, что легко создавать динамические @keyframes they are inflexible because they must be hard-coded.

С переходом немного легче работать, поскольку они могут изящно реагировать на любые изменения CSS, выполняемые JavaScript.

Тем не менее, сложность, которую могут дать вам CSS-переходы, довольно ограничена - an animation with multiple steps is difficult to achieve.

Это проблема, которую предназначены для анимации CSS @keyframe, but they dont offer the level of dynamic responsiveness that transitions do.

но эти ссылки могут помочь вам

Link1: инструмент, который генерирует анимацию @-webkit-keyframe со множеством крошечных шагов. Это открывает дверь для неограниченного выбора ослабляющей формулы.

Link2 Это может быть очень полезно.

Link3, это поможет вам занять это основание, поскольку оно предоставляет пользовательский интерфейс для создания анимаций и экспорта его в CSS-код.

Я думаю ** это решение, безусловно, сработает для вас. Его используют для динамических ключевых кадров