CSS3 中动画使用 @keyframes 关键字 定义 动画 ;
@keyframes element-move {
0% { transform: translateX(500px); }
100% { transform: translateX(0); }
}
在 @keyframes 定义的动画中 , 可以设置一系列的 CSS 属性 , 用于控制动画的运行 , 常见的属性如下 : ( 下面的动画属性是设置在 执行动画 的 标签元素 样式中的 )
div {
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
}
div {
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
}
div {
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
}
div {
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
}
div {
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
}
div {
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
}
div {
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
}
div {
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 动画属性</title>
<style>
@keyframes element-move {
0% {
transform: translateX(500px);
}
100% {
transform: translateX(0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
执行效果 : 网页运行后 , 下面的小方块 无限循环 左右 往复运动 ;
CSS3 动画属性简写 语法 :
animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
上述简写的各个属性之间 , 使用空格隔开 ;
动画属性中 , 除了 animation-play-state 属性之外 , 其它动画属性都可以简写到 animation 属性中 ;
animation-play-state 属性 控制 动画开始暂停 , 一般需要根据代码逻辑单独控制 ;
animation 简写属性 中各属性对应关系 :
在编写 animation 简写动画属性时 , 如果没有记住顺序 , 可以在 输入 anim 之后 , 发现下面的提示 ,
然后在第一个提示位置 , 敲回车 , 即可生成如下代码 :
animation: name duration timing-function delay iteration-count direction fill-mode;
然后根据上述代码提示 , 填充每个 动画属性值 ;
原来设置动画属性需要的代码 :
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
使用动画的简写形式 , 只需一行代码即可实现 :
/* 使用简写形式设置动画属性 */
animation: element-move 2s ease 1s infinite alternate backwards;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 动画属性</title>
<style>
@keyframes element-move {
0% {
transform: translateX(500px);
}
100% {
transform: translateX(0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 使用简写形式设置动画属性 */
animation: element-move 2s ease 1s infinite alternate backwards;
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
执行结果 : 在网页中的小方块左右往复运动 ;