CSS3 переходы цепочки

Question

Что такое синтаксически чистое решение для запуска цепочки отдельных переходов CSS3 на одном элементе, один за другим? Пример:

• установите влево на 10 пикселей и непрозрачность от 1 до 200 мс
• установить влево от 30 до 500 мс
• установите влево на 50 пикселей и непрозрачность от 0 до 200 мс

Можно ли это сделать без JavaScript? Если нет, то как правильно его кодировать с помощью JavaScript?

Answer 1

Полагаю, вам нужна анимация CSS3, в которой вы определяете стили CSS в разных точках анимации, а браузер выполняет анимацию за вас. Вот одно описание этого: http://css3.bradshawenterprises.com/animations/.

Вам нужно будет проверить поддержку браузеров для ваших целевых браузеров.

Вот демонстрация, которая работает в Chrome. Анимация - чистый CSS3, я использую только Javascript для запуска и сброса анимации:

http://jsfiddle.net/jfriend00/fhemr/

CSS можно изменить, чтобы он работал и в Firefox 5+.

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        left: 10px;
    }
    22% {
        opacity: 1;
    }
    77% {
        left: 30px;
    }
    100% {
        left: 50px;
        opacity: 0;
    }
}

.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}    

Answer 2

В чистом CSS это можно сделать с помощью свойства transition-delay , с его помощью вы можете отложить второй и третий переход.

Лично мне бы хотелось, чтобы решение JS было лучше.для этого можно использовать тайм-ауты или «переходное» событие.

Я бы также предложил script.aculo.us (или бета-версия 2: scripty2 )Он специально разработан для того, чтобы сделать программирование таких вещей эффективным и легким.