Урок №10 Анимации в CSS3 - 26 October 2014

Home » » Урок №10 Анимации в CSS3

9:58 PM

Урок №10 Анимации в CSS3

PC-Tools

Анимации в CSS3

Чрез анимациите в CSS3, можем да създаваме анимации които могат да заменят Flash анимациите, анимираните изображения и JavaScripta в страниците.

Поддържащи браузъри

Цифрите в таблицата определят най-ниската версия на браузъра която напълно поддържа това CSS3 свойство.
Числата след които има -webkit-, -moz-, или -o- определят първата версия която е работа с префикс.

Свойство
@keyframes	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-
animation	10.0	4.0 -webkit-	16.0 5.0 -moz-	4.0 -webkit-	15.0 -webkit- 12.1 12.0 -o-

CSS3 правилото @keyframes

Правилото @keyframes е мястото където създаваме анимацията.

Ако зададем CSS стил в правилото @keyframes анимацията градивно ще премине от един в друг стил.

CSS3 Анимации

Когато създаваме анимация в правилото @keyframe трябва да я свържем със селектор, в противен случай анимацията няма да има ефект.

Свързваме анимацията със селектор (елемент) като задаваме поне тези две свойства:

Името на анимацията
Продължителността на анимацията

Пример

Свързване на "myfirst" анимацията с div елементите. Продължителност 5 секунди:

div {

    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */

    animation: myfirst 5s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

    from {background: red;}

    to {background: yellow;}

}

/* Standard syntax */

@keyframes myfirst {

    from {background: red;}

    to {background: yellow;}

}

Бележка: Ако не зададете продължителност, движението няма да има ефект, защото по подразбиране стойността е 0.

Какво представляват CSS3 анимациите?

Анимацията позволява на елемента градивно да премине от един в друг стил.

Можете да променяте колкото искате свойства, колкото искате пъти.

<>Можете да задавате кога анимацията да започне чрез проценти (%) или като използваме ключовите думи "from" и "to" (които отговарят на 0% и 100%).You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).

Като 0% е старта на анимацията, и 100% отговаря на края на анимацията.

Пример

Промяна на фоновия цвят когато анимацията е на 25%, след това на 50%, и отново когато анимацията е на 100% завършена:

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

/* Standard syntax */

@keyframes myfirst {

    0%   {background: red;}

    25%  {background: yellow;}

    50%  {background: blue;}

    100% {background: green;}

}

Пример

Промяна на фоновия цвят и позицията когато анимацията е на 25%,50%,75% и отново когато анимацията достигне до 100%.

/* Chrome, Safari, Opera */

@-webkit-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;}

}

/* Standard syntax */

@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;}

}

Още примери за анимации

Този пример използва всичките седем свойства на анимациите:

Пример

div {

    /* Chrome, Safari, Opera */

    -webkit-animation-name: myfirst;

    -webkit-animation-duration: 5s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-delay: 2s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

    -webkit-animation-play-state: running;

    /* Standard syntax */

    animation-name: myfirst;

    animation-duration: 5s;

    animation-timing-function: linear;

    animation-delay: 2s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-play-state: running;

}

Същият ефект като в горният пример (освен анимацията с play-state свойсто). Можем да постигнем и със стенография ето така:

Пример

div {

    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */

    animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */

}

Свойства на анимациите в CSS3

Следващата таблица разглежда правилото @keyframes и всички свойства на анимациите:

Свойство	Описание	CSS
@keyframes	Задава анимацията	3
animation	Стенографично свойство за задаване на всички анимации освен -play-state и -fill-mode свойствата.	3
animation-delay	Определя кога ще започне анимацията	3
animation-direction	Задава дали анимацията трябва да се изпълни и в обратната посока.	3
animation-duration	Задава секундите или стотните в които анимацията трябва да е приключила (или да направи един оборот).	3
animation-fill-mode	Задава стиловете които ще бъдат приложени на елемента когато анимацията не се изпълнява (когато е приключила или когато е зададен "delay")	3
animation-iteration-count	Определя колко пъти анимацията трябва да бъде изпълнена	3
animation-name	Задава име на @keyframes анимациите.	3
animation-play-state	Определя дали анимацията се изпълнява или е не.	3
animation-timing-function	Задава изкривяване в скоростта на анимацията.	3

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0