Эффект перехода и преобразования HTML5. - PullRequest
Новая
       40

Эффект перехода и преобразования HTML5.

0 голосов
/ 29 июля 2011

Когда я нажимаю кнопку, я хочу сделать некоторые вещи, перечисленные ниже, используя HTML5 и CSS3. Но я не знаю, как я могу достичь этих вещей одновременно .

Когда я нажимаю кнопку:

Изменить свойство CSS3 элемента А -webkit-transform на rotateY(180deg) за 1 секунду (используя -webkit-transition:-webkit-transform 1s;)

Измените свойство CSS3 элемента A -webkit-transform на scale(0.8) за 0,5 секунды (используя -webkit-transition:-webkit-transform 0.5s;). Затем измените свойство CSS3 элемента A -webkit-transform обратно на scale(1) через 0,5 секунды (используя -webkit-transition:-webkit-transform 0.5s;).

Есть ли какие-либо решения по этому вопросу?

Спасибо!

1 Ответ

1 голос
/ 29 июля 2011

Вы должны использовать анимацию вместо переходов: 

@-webkit-keyframes myAnimation{
    from {
        -webkit-transform: rotate(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(90deg) scale(0.8);
    }
    to {
        -webkit-transform: rotate(180deg) scale(1);
    }
}


div {
    -webkit-animation-duration: 1s;
}
div:hover {
    -webkit-animation-name: myAnimation;
    -webkit-transform: rotate(180deg) scale(1);
}

Вот демоверсия .

...