Page 206 - Сила CSS3 Освой новейший стандарт

206 • Глава 5. Повышение эффективности за счет псевдоклассов

уСложняем задачу
В этом примере в каждом ключевом кадре мы меняем только фоновый цвет, однако
в ключевой кадр можно добавить сколько угодно свойств. Просто запишите их в фигурных
скобках внутри ключевого кадра — точно так же, как вы бы поступили с любым другим
правилом CSS. Например, для того чтобы поменять не только фоновый цвет, но и размер
шрифта, можно применить такой код:
@-webkit-keyframes fade {
0% {
background: hsla(203,78%,36%,.2);
font-size: 100%;
}
100% {
background: none;
font-size: 120%;
}
}
Также с одним элементом можно связать несколько анимационных процессов. Например,
изменение каждого из перечисленных свойств можно было бы выделить в отдельный
анимационный процесс:
@-webkit-keyframes fade {
0% {background: hsla(203,78%,36%,.2);}
100% {background: none;}
}
@-webkit-keyframes scaletext {
0% {font-size: 100%;}
100% {font-size: 120%;}
}

После этого остается только объявить обе анимации с одним и тем же элементом:
h2:target {
-webkit-animation-name: fade, scaletext;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
Определение анимационных процессов по отдельности занимает больше места в коде,
но так вам будет проще разобраться, что происходит в каждой конкретной точке сложной
анимации. Кроме того, вы сможете контролировать продолжительность, количество по-
вторений и другие свойства одного анимационного процесса независимо от прочих. Еще
одно преимущество такого подхода заключается в возможности повторно использовать
анимационный процесс с другими элементами. Например, у элементов h2 должен меняться
фоновый цвет и масштабироваться текст, а у элементов h3 достаточно только поменять
размер текста. Поскольку анимационные процессы определены по отдельности, анима-
цию textscale можно применить повторно к элементам h3, не создавая для них отдельный
анимационный процесс.

www.trk.kg