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>
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
