目录
由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作。
animation和前面所学的transition有相似之处,区别为transition需要人为触发动画而animation不需要人为触发。
animation的属性
animation-name 设置动画名称
animation-duration 设置动画持续时长
animation-timing-function 设置动画速率 linear ease ease-in ease-out ease-in-out
animation-delay 设置动画延迟
animation-iteration-count 设置动画执行次数n infinite无数次 默认是1次
animation-direction 设置动画反向 是否反方向执行 alternate 反方向执行
animation-fill-mode 设置动画执行完毕停留在哪一帧
简写形式:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 停止位置(会影响何时开始,一般不加)。
animation-play-state 动画暂停执行 paused表示暂停 running表示播放
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
animation: transform 2s linear 0s infinite alternate ;
}
/* 定义动画关键帧 变形:平移+旋转+缩放 */
@keyframes transform {
/* 开始状态 结束状态 过程 */
/* 开始状态 */
from{
/* transform 变形 translate 平移 translateX 向x轴平移 rotate旋转 */
transform: translate(0) rotate(0);
background-color: skyblue;
border-radius: 0px;
}
/* 结束状态 */
to{
transform: translate(200px) rotate(360deg);
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果:
animation动画