css: css3动画（淡入淡出）

@keyframes 规则用于创建动画，并且必须把它捆绑到某个选择器，否则不会产生动画效果。您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。（动画的名称和时长这两个属性是动画必要的）/*定义动画*/@keyframes myfirst{0%{background: red;}25%{background: yellow;}50%{background: blue;}1

小强有个dream

11563人浏览 · 2022-04-13 20:24:49

小强有个dream · 2022-04-13 20:24:49 发布

@keyframes 规则用于创建动画，并且必须把它捆绑到某个选择器，否则不会产生动画效果。
您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。（动画的名称和时长这两个属性是动画必要的）

/*定义动画*/
@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
/*使用动画：将动画绑定元素上*/
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

属性	描述	是否必要
animation	所有动画属性的简写属性，除了 animation-play-state 属性
animation-name	规定 @keyframes 动画的名称	必要
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	必要
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。