Облегчение при наведении ключевого кадра CSS3 - PullRequest
Новая
       20

Облегчение при наведении ключевого кадра CSS3

2 голосов
/ 31 января 2012

Попытка анимировать простой поворот с помощью ключевого кадра.Это все хорошо, но я ненавижу это, как это внезапно останавливается при отключении мыши.Я пробовал: 

 -webkit-animation-timing-function: ease-in-out;

, но это относится только к кадрам, а не к анимации в целом.

Это то, что я имею, любая помощь приветствуется.

@-webkit-keyframes Rotate {
0% {
    -webkit-transform:rotate(0deg);
}
100% {
    -webkit-transform:rotate(360deg);
} }

и парение 

a:hover {
-webkit-animation-name: Rotate;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; }

1 Ответ

0 голосов
/ 10 апреля 2012

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

В примере, над которым я работал, я хотел, чтобы стрелка была направлена ​​прямо наРолловер плавно вращается, чтобы указывать вниз.Вот код: 

div#welcome img{
            -webkit-transition: 1.5s all ease;
            -moz-transition: 1.5s all ease;
            -o-transition: 1.5s all ease;
    transition: 1.5s all ease;               
}

div#welcome:hover img {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    transform: rotate(90deg);   
}

А вот наценка: 

<div id="welcome">
            <h1>Welcome
            </h1>
            <img class="hover" src="images/arrow.png" />
            <p>
               blah blah blah
            </p>
        </div>

Хитрость в том, чтобы перевести ваш переход в исходное состояние, в данном случае div #welcome h1 img тогда вы помещаете конечный результат в состояние действия, то есть в стиль: hover.Это будет означать, что когда пользователь перевернется, стрелка будет плавно вращаться, а затем выкатываться при спуске.

Здесь описывается часть стиля easy .

...