css动画

本文是查看w3c School 网站，学习整理的笔记

过渡属性

过渡属性

@keyframes 规则（ie10+）

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

// 关键词 "from" 和 "to"
@keyframes myfirst  //动画名
{ //动画效果
from {background: red;}
to {background: yellow;}
}

// 百分比
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

div {
  animation: myfirst 5s;   // 动画名，时长
}

css3动画属性