Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2014, 16:28
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

css анимация, плавный вовзрат к начальному значению
Если для анимации использовать transition + превдокласс :hover, то когда мышку убираешь с элемента, то происходит плавный возврат к начальному значению css свойств элемента(которые были до анимации). Сейчас я использую @keyframes анимацию и свойство animation, но здесь почемуто, если убрать мышку с элемента, происходит резкий возврат к начальным значениям css свойств элемента(которые были до анимации), вместо плавного. Как сделать плавный переход?
Увидел интересную вещь. На одном сайте для анимации элемента использовали одновременно свойства transition и animate и в таком случае все было идеально! Вот этот сайт(смотреть в мозиле, по-моему только для мозилы прописаны все нужные свойства, то есть
все префиксы -moz) http://css3.bradshawenterprises.com/animations/ внизу страницы кнопка "hover to pulsate". Скажите, пожалуйста, это документированно, чтобы одновременно применялась и animate и transition анимация к одному элементу? И кто из этих
двух свойств побеждает? Вообще может где-нибудь про это пишут и можно почитать, а то не нашел...
.pBut-aPulse:hover
{
    -webkit-animation:pBut-aPulse 0.5s infinite;
    -o-animation: pBut-aPulse 0.5s infinite;
    -moz-animation: pBut-aPulse 0.5s infinite;
    animation: pBut-aPulse 0.5s infinite;
}
 
@-o-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);  
    }
    100%
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@-webkit-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);  
    }
    100%
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@-moz-keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);  
    }
    100%
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
@keyframes pBut-aPulse
{
    50%
        {
        -ms-transform:scale(1.1, 1.1);
                -webkit-transform:scale(1.1, 1.1);
                -o-transform:scale(1.1, 1.1);
                -moz-transform:scale(1.1, 1.1);  
    }
    100%
        {
        -ms-transform:scale(1, 1);
                -webkit-transform:scale(1, 1);
                -o-transform:scale(1, 1);
                -moz-transform:scale(1, 1);
    }
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
css анимация, плавный вовзрат к начальному значению FanAizu (X)HTML/CSS 4 16.01.2014 15:49
CSS анимация после :target gJam (X)HTML/CSS 0 01.08.2013 21:42
Выборка по значению css Telnet jQuery 5 29.05.2011 16:47