2+2*2=6
<style type="text/css"> .primer {font-size: 3.5em; position: relative;} .primer:after { content: "?"; color:rgba( 255, 0, 0, 0); position: absolute; right: -25px; top: -7px; -moz-animation: otvet 8s forwards; -webkit-animation: otvet 8s forwards; -ms-animation: otvet 8s forwards; } .primer:before { content: "8 \2639"; position: absolute; right: -80px; top: -7px; color:rgba( 255, 0, 0, 0); -moz-animation: vosem 8s 8s forwards; -webkit-animation: vosem 8s 8s forwards; -ms-animation: vosem 8s 8s forwards; } .shest { position: relative; font-size: 3.5em; color:rgba( 0, 255, 0, 0); -moz-animation: shest 1s 16s forwards; -webkit-animation: shest 1s 16s forwards; -ms-animation: shest 1s 16s forwards; } .shest:after { position: absolute; right: -50px; top: -10px; content: " \263a"; } @-moz-keyframes otvet { 0% { color:rgba( 255, 255, 0, 1); } 30% { color:rgba( 216, 0, 255, 1);} 60% { color:rgba( 255, 255, 0, 1); } 100% { color:rgba( 255, 255, 0, 0);} } @-moz-keyframes vosem { from { color:rgba( 255, 0, 0, 1); } to { color:rgba( 255, 0, 0, 0); } } @-moz-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }} @-webkit-keyframes otvet { 0%, 60% { color:rgba( 255, 255, 0, 1); } /* объединяем две строки см. @-moz-keyframes otvet */ 30% { color:rgba( 216, 0, 255, 1);} 100% { color:rgba( 255, 255, 0, 0);} } @-webkit-keyframes vosem { /* ключевые кадры с именем vosem */ from { color:rgba( 255, 0, 0, 1); } /* начальный кадр */ to { color:rgba( 255, 0, 0, 0); } } /* конечный кадр */ @-webkit-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }} @-ms-keyframes otvet { 0%, 60% { color:rgba( 255, 255, 0, 1); } 30% { color:rgba( 216, 0, 255, 1);} 100% { color:rgba( 255, 255, 0, 0);} } @-ms-keyframes vosem { from { color:rgba( 255, 0, 0, 1); } to { color:rgba( 255, 0, 0, 0); } } @-ms-keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }} </style> <span class="primer">2+2*2=</span><span class="shest">6</span>
Список свойств, которые будут изменены, задаём в @keyframes. Помимо начального и конечного кадров, можно прописать промежуточные шаги с помощью процентов.
Три варианта равнозначны
@keyframes shest { from { color:rgba( 0, 255, 0, 1); } to { color:rgba( 0, 255, 0, 1); }} @keyframes shest { 0% { color:rgba( 0, 255, 0, 1); } 100% { color:rgba( 0, 255, 0, 1); }} @keyframes shest { 0%, 100% { color:rgba( 0, 255, 0, 1); }}
Теперь рассмотрим свойство animation, которое выполняет @keyframes с определённым именем.
анимация CSS
<style type="text/css"> #blok1 { background-color: #808991; width: 500px; -moz-animation: animaciya 8s ease-in-out 2s infinite alternate; -webkit-animation: animaciya 8s ease-in-out 2s infinite alternate; -ms-animation: animaciya 8s ease-in-out 2s infinite alternate;} #blok1:hover { -webkit-animation-play-state:paused; /* пауза при наведении курсора */ -moz-animation-play-state:paused; -ms-animation-play-state:paused;} @-moz-keyframes animaciya { from {width: 500px; background-color: #808991;} to {width: 400px; background-color: #D0D941;} } @-webkit-keyframes animaciya { from {width: 500px; background-color: #808991;} to {width: 400px; background-color: #D0D941;} } @-ms-keyframes animaciya { from {width: 500px; background-color: #808991;} to {width: 400px; background-color: #D0D941;} } </style> <div id="blok1">анимация CSS</div>
Строку
animation: animaciya 8s ease-in-out 2s infinite alternate;можно записать по другому:
animation-name: animaciya; /* поддержка ключевых кадров с именем animaciya */ animation-duration: 8s; /* продолжительность растягивания 8 секунд */ animation-timing-function: ease-in-out; animation-delay: 2s; /* по истечении 2 секунд начинается растягивание */ animation-iteration-count: infinite; /* бесконечное повторение */ animation-direction: alternate; /* плавное перемещение туда-сюда */
свойство [по умолчанию] | описание (наведите на прямоугольник) |
animation-name | поддержка @keyframes с определённым именем |
- | |
animation-duration | продолжительность цикла анимации 2s 8s |
0 | |
animation-timing-function | изменения промежуточных значений в течении цикла анимации (подробнее) |
ease | |
animation-delay | спустя какое время начинается анимация 0s 7s |
0 | |
animation-iteration-count | сколько раз воспроизводится анимация (infinite - бесконечно) 3 infinite |
1 | |
animation-direction | normal - выполняет анимацию от from до to alternate - выполняет анимацию от from до to, от to до from normal alternate reverse a-r |
normal | |
animation-fill-mode | позиция после завершения анимации none forwards backwards both |
none | |
animation-play-state | устанавливает паузу running | paused |
running |
Обязательно использование двух свойств: animation-name и animation-duration. К одному элементу может быть применено несколько анимаций через запятую.
animation-name: fall, fade, spin1;
Первое, что мне пришло на ум: смена текста, или ссылок, или изображений на CSS. Действо получается аналогично скрипту jQuery. Для полного счастья не хватает поддержки у @keyframes стилей display и content (подробнее).
<style type="text/css"> #smena {position: relative;font-size: 3.5em;font-weight: bold;} #smena li {color:rgba( 0, 0, 0, 0); position: absolute; left: 0px; top: 0px;list-style: none;} #smena li:nth-child(1), #smena li:nth-child(1) a {-moz-animation: raz 40s infinite;-webkit-animation: raz 40s infinite;-ms-animation: raz 40s infinite;} #smena li:nth-child(2), #smena li:nth-child(2) a {-moz-animation: dva 40s infinite;-webkit-animation: dva 40s infinite;-ms-animation: dva 40s infinite;} #smena li:nth-child(3), #smena li:nth-child(3) a {-moz-animation: tri 40s infinite;-webkit-animation: tri 40s infinite;-ms-animation: tri 40s infinite;} #smena li:nth-child(4), #smena li:nth-child(4) a {-moz-animation: chetyre 40s infinite;-webkit-animation: chetyre 40s infinite;-ms-animation: chetyre 40s infinite;} @-moz-keyframes raz { 0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; } 1%, 22% { color:rgba( 76, 98, 113, 1); } 24%, 100% { visibility: hidden; } } @-moz-keyframes dva { 25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; } 26%, 47% { color:rgba( 76, 98, 113, 1); } 0%, 24%, 49%, 100% { visibility: hidden; } } @-moz-keyframes tri { 50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; } 51%, 72% { color:rgba( 76, 98, 113, 1); } 0%, 49%, 74%, 100% { visibility: hidden; } } @-moz-keyframes chetyre { 75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; } 76%, 99% { color:rgba( 76, 98, 113, 1); } 0%, 74% { visibility: hidden; } } @-webkit-keyframes raz { 0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; } 1%, 22% { color:rgba( 76, 98, 113, 1); } 24%, 100% { visibility: hidden; } } @-webkit-keyframes dva { 25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; } 26%, 47% { color:rgba( 76, 98, 113, 1); } 0%, 24%, 49%, 100% { visibility: hidden; } } @-webkit-keyframes tri { 50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; } 51%, 72% { color:rgba( 76, 98, 113, 1); } 0%, 49%, 74%, 100% { visibility: hidden; } } @-webkit-keyframes chetyre { 75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; } 76%, 99% { color:rgba( 76, 98, 113, 1); } 0%, 74% { visibility: hidden; } } @-ms-keyframes raz { 0%, 23% { color:rgba( 76, 98, 113, 0); visibility: visible; } 1%, 22% { color:rgba( 76, 98, 113, 1); } 24%, 100% { visibility: hidden; } } @-ms-keyframes dva { 25%, 48% { color:rgba( 76, 98, 113, 0); visibility: visible; } 26%, 47% { color:rgba( 76, 98, 113, 1); } 0%, 24%, 49%, 100% { visibility: hidden; } } @-ms-keyframes tri { 50%, 73% { color:rgba( 76, 98, 113, 0); visibility: visible; } 51%, 72% { color:rgba( 76, 98, 113, 1); } 0%, 49%, 74%, 100% { visibility: hidden; } } @-ms-keyframes chetyre { 75%, 100% { color:rgba( 76, 98, 113, 0); visibility: visible; } 76%, 99% { color:rgba( 76, 98, 113, 1); } 0%, 74% { visibility: hidden; } } </style> <ul id="smena"> <li><a href="#1">Раз</a></li> <li><a href="#2">Два</a></li> <li><a href="#3">Три</a></li> <li><a href="#4">Четыре</a></li> </ul>Постепенно появляющийся текст
<style type="text/css"> @-moz-keyframes typing { from { width: 0; } } @-moz-keyframes blink-caret { 50% { border-color: transparent; } } @-webkit-keyframes typing { from { width: 0; } } @-webkit-keyframes blink-caret { 50% { border-color: transparent; } } @-ms-keyframes typing { from { width: 0; } } @-ms-keyframes blink-caret { 50% { border-color: transparent; } } #steps { font: bold 200% Consolas, Monaco, monospace; border-right: .1em solid; width: 16.5em; /* если ch не поддерживается */ width: 30ch; /* ch - единица эквивалентна ширине символа моноширного шрифта () */ display: inline-block; white-space: nowrap; overflow: hidden; -moz-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate; -webkit-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate; -ms-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate; } </style> <a href="#" id="steps">Постепенно появляющийся текст</a>Образец от www.cssplay.co.uk






<style type="text/css"> #holder { margin:50px auto; -webkit-perspective:600px; -moz-perspective:600px; text-indent: 0px; } .box { position: relative; margin: 0 auto; height: 200px; width: 200px; -webkit-animation: spin 20s infinite linear; -moz-animation: spin 20s infinite linear; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; } .box div { position: absolute; height: 200px; width: 200px; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); -webkit-animation:rotate 15s infinite linear; -moz-animation:rotate 15s infinite linear; } .box div img {width:200px; height:200px; border-radius:200px; -webkit-animation:rot 10s infinite linear; -moz-animation:rot 10s infinite linear; padding: 0; } .box div.side1 { background:rgba( 213, 62, 7, 0.8); -webkit-transform:translateZ(100px); -moz-transform:translateZ(100px); } .box div.side2 { background:rgba( 127, 255, 212, 0.8); -webkit-transform:rotateY(90deg) translateZ(100px); -moz-transform:rotateY(90deg) translateZ(100px); } .box div.side3 { background:rgba( 255, 219, 88, 0.8); -webkit-transform:rotateY(180deg) translateZ(100px); -moz-transform:rotateY(180deg) translateZ(100px); } .box div.side4 { background:rgba( 153, 17, 153, 0.8); -webkit-transform:rotateY(-90deg) translateZ(100px); -moz-transform:rotateY(-90deg) translateZ(100px); } .box div.side5 { background:rgba( 0, 71, 171, 0.8); -webkit-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); -moz-transform:rotateX(-90deg) translateZ(100px) rotate(180deg); } .box div.side6 { background:rgba( 0, 171, 147, 0.8); -webkit-transform:rotateX(90deg) translateZ(100px); -moz-transform:rotateX(90deg) translateZ(100px); } @-moz-keyframes spin { 0% {-moz-transform: rotateX(0deg) rotateY(0deg);} 100% {-moz-transform: rotateX(1080deg) rotateY(360deg);} } @-webkit-keyframes spin { 0% {-webkit-transform: rotateX(0deg) rotateY(0deg);} 100% {-webkit-transform: rotateX(1080deg) rotateY(360deg);} } @-moz-keyframes rot { 0% {-moz-transform: rotate(0deg);} 100% {-moz-transform: rotate(360deg);} } @-webkit-keyframes rot { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } </style> <div id="holder"> <div class="box"> <div class="side1"><img src="URL_изо" /></div> <div class="side2"><img src="URL_изо" /></div> <div class="side3"><img src="URL_изо" /></div> <div class="side4"><img src="URL_изо" /></div> <div class="side5"><img src="URL_изо" /></div> <div class="side6"><img src="URL_изо" /></div> </div> </div>Падающие снежинки от addyosmani.com
❅
❄
❅
❄
❅
❄
❅
❄
<style type="text/css"> #container{ width: 100%; height: 480px; position: relative; background-color: #808991; } @-webkit-keyframes fade{ 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; } } @-webkit-keyframes fall{from {top: 10px;} to {top: 470px;}} @-webkit-keyframes accumulate{ from {height: 0px; opacity: 0} to {height: 20px; opacity: .75;}} @-webkit-keyframes spin1{ 0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);} 100% { -webkit-transform: rotate(180deg) translate(10px, 75px);} } @-moz-keyframes fade{ 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; } } @-moz-keyframes fall{ from {top: 10px;} to {top: 470px;} } @-moz-keyframes accumulate{ from {height: 0px; opacity: 0} to {height: 20px; opacity: .75;} } @-moz-keyframes spin1{ 0% { -moz-transform: rotate(-180deg) translate(0px, 0px);} 100% { -moz-transform: rotate(180deg) translate(10px, 75px);} } #snow div { position: absolute; top: -40px; -webkit-animation-name: fall, fade, spin1; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; -moz-animation-name: fall, fade, spin1; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-timing-function: ease-in; } .snowflake { color: #fff; font-size: 2em; position: absolute; } .snowflake.f1 { left: 40px; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; } .snowflake.f2 { font-size: 1.8em; left: 120px; -webkit-animation-duration: 7s; -moz-animation-duration: 7s; } .snowflake.f3 { left: 200px; -webkit-animation-duration: 8s; -moz-animation-duration: 8s; } .snowflake.f4 { font-size: 1.5em; left: 280px; -webkit-animation-duration: 6s; -moz-animation-duration: 6s; } #ground{ background-color: #fff; width: 100%; position: absolute; bottom: 0; height: 20px; -webkit-animation-name: accumulate; -webkit-animation-duration: 60s; -moz-animation-name: accumulate; -moz-animation-duration: 60s; } </style> <div id="container"> <div id="snow" class="snow"> <div class="snowflake f1">❅</div> <div class="snowflake f2">❄</div> <div class="snowflake f3">❅</div> <div class="snowflake f4">❄</div> </div> <div id="ground"></div> </div>
20 комментариев:
margin: 0 auto;
text-align: center;
как это исправить?
http://jsfiddle.net/NeonRain/2oc22ab5/
@keyframes uptocall1 {
14%, 30%, 41% {box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;}
19%, 35%, 46% {box-shadow: 0 0 0 0 #54e0fa, 0 0 0 1px red;}
29%, 40%, 51% {box-shadow:0 0 0 90px #fff, 0 0 0 91px #fff;}
}
Есть свойство visibility (см. http://shpargalkablog.ru/2012/12/display-visibility-css.html )
Сделайте разницу в 1% (см. http://shpargalkablog.ru/2013/12/blink-text.html )