CSS原生动画
@keyframes
指定元素在规定时间内从当前状态转变到另一种状态
- 动画名称:animation-name : change;
- 时长(默认0):animation-duration : 5s;
- 动画运行次数: animation-iteration-count : 4; //infinite 一直持续下去
- 延迟动画:animation-delay : 2s; 允许负值
- 动画交替运行方式:animation-direction :
normal : 默认值,向前播放(正常播放)- reverse :向后播放
- alternate:先向前,再向后
- alternate-reverse:先向后,再向前
- 改变动画速度曲线:animation-timing-function:
- ease:慢-加快-慢(默认)
- linear:速度不变
- ease-in:慢速开始
- ease-out:慢速结束
- ease-in-out:开始和结束较慢(和ease的区别在于ease有加速度)
- cubic-bezier(n, n, n, n) :运行在三次卡贝尔函数中指定的值
- 暂停动画:
- animation-play-state : paused ; //running播放
- -webkit-animation-play-state : paused; /* Safari 和 Chrome */
代码演示
两种写法,如下:给div绑定动画change, 让背景颜色在5s内从红变为蓝。
注:上方设置动画的属性都是对div的操作,都写在div的样式里。
<head>
<style>
div {
width : 100px;
height : 100px;
position : relative;
badkground : #f30;
animation-name : change;
animation-duration : 5s;
animation-iteration-count : 4;
/*animation-delay : 2s*/
}
/*写法一*/
@keyframes change {
from {background-color : #f30;}
to {background-color : blue;}
}
/*写法二: 百分比控制时间*/
@keyframes change {
0% {background-color:#f30; top:0;}
50% {background-color:white; top:20px;}
100% {background-color:blue; top:90px;}
}
</style>
</head>
<body>
<div></div>
</body>