![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Ссылки на каскадные стили CSS - animation-direction.Поддержка Браузеров
Внимание!!! Тег animation-direction не поддерживается в Internet Explorer 9 и более ранних версий. Определение и использование. Свойство animation-direction пказывает, должна ли анимация воспроизводиться в обратном порядке на чередующихся( четных) циклах воспроизведения. Если анимация установлена и воспроизводится только один раз, это свойство не будет иметь никакого эффекта. Таким образом, свойство animation-direction определяет то, что требуется ли проигрывать анимацию на страницах сайта в обратном направлении( можно указать несколько значений через запятую). Если требуется, то все нечетные циклы проигрывают анимацию в прямом направлении, а все четные циклы исполняются в обратном напрвлении. Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что функция animation-direction, которая действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера. Синтаксис: animation-direction: value; Описание и Использование
Свойства Значения
ПРИМЕР
Напишем коды программы для анимации с изменением направления движения рисунка: < !DOCTYPE html> < html> < head> < style> div #animation_du { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; /* Safari and Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; } @ keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @ -webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } < /style> < /head> < body> < p>Примечание: анимация-свойство задержки не поддерживаются в Internet Explorer 9 и более ранних версий.< /p> < div id="animation_du">< /div> < /body> < /html> Ниже Вы увидите результат выполнения сценария кодов программы по анимации рисунка: Примечание: анимация-свойство задержки не поддерживаются в Internet Explorer 9 и более ранних версий. |