CSS-7.2-CSS动画
CSS3动画、CSS3动画功能和CSS3动画属性
1.CSS3动画是指使用CSS代码让网页中的元素运动起来形成的动画
2.CSS3动画功能可以在许多网页中取代动画图片、Flash动画以及JavaScript
3.CSS3动画属性是多次过渡和变换的组合，同时可以设置播放次数，具有控制播放和暂停等功能
CSS3动画
1.使用@keyframes创建关键帧动画
2.使用animation调用关键帧动画
一：使用@keyframes创建关键帧动画
- @keyframes用于创建动画
- 在@keyframes中设置CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
> @keyframes基本语法
@keyframes 动画名称{
阶段1{CSS样式}
阶段1{CSS样式}
阶段1{CSS样式}
}
动画中阶段的两种方式写法
1.每个阶段用百分比表示，从0%到100%（起止必须设置，即0%和100%）
2.使用from和to表示从某阶段到某阶段
二：2.使用animation调用关键帧动画
- 创建好一个动画后，需要在CSS选择器中使用animation动画属性，调用声明好的关键帧动画
- 动画属性中必须有动画名称和时长，否则动画不生效
> animation基本语法
.div{
/* div调用frame这个关键帧动画，5s完成所有动画效果 */
animation:frame 5s;
}
三：CSS3 animation 动画属性
CSS3 animation 动画属性
1.animation：除 animation-play-state 之外的所有动画属性的简写属性
2.animation-name：规定 @keyframes 动画的名称
3.animation-duration：规定完成一个动画所需的秒或毫秒，默认是0
4.animation-timing-function：规定动画的速度曲线
5.animation-delay：规定动画何时开始
6.animation-iteration-count：规定动画被播放的次数
7.animation-direction：规定动画在下一次循环中是否轮流反向播放
8.animation-play-state：规定动画是否正在运行或暂停
9.animation-fill-mode：规定对象动画时间之外的状态
1、animation
- 除 animation-play-state 之外的所有动画属性的简写属性
- 需按照以下顺序书写属性值
- 可以设置多个动画，每个动画之间用空格分隔
2、animation-name
- 规定 @keyframes 动画的名称
3、animation-duration
- 规定完成一个动画所需时间
- 单位是秒或毫秒，默认是0
4、animation-timing-function
- 规定动画的速度曲线
- 属性值
- linear：匀速
- ease：默认值，逐渐变慢
- ease-in：加速
- ease-out：减速
- ease-in-out：加速然后减速
5、animation-delay
- 规定动画何时开始
- 默认是0
6、animation-iteration-count
- 规定动画被播放的次数，默认是1
- 使用infinite表示无限次播放
7、animation-direction
- 规定动画在下一次循环中是否轮流反向播放
- 属性值
- normal：默认值，动画正常播放
- alternate：动画轮流反向播放
8、animation-play-state
- 规定动画是否正在运行或暂停
- 属性值
- paused：设置动画暂停
- running：设置动画正在播放
9、animation-fill-mode
- 规定对象动画时间之外的状态
- 属性值
- none：不改变默认行为
- forwards：停留在动画结束状态
- backwards：停留在动画开始状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS动画</title>
<style type="text/css">
div{
width: 200px;
height: 30px;
}
.div1{
background-image: url(./background.jpg);
}
.div2{
background-color:blue;
}
@keyframes frame1{
from{
width: 200px;
}
to{
width: 400px;
}
}
@keyframes frame2{
0%{
width: 200px;
}
33%{
width: 300px;
}
100%{
width: 400px;
}
}
/* 通过设置单个属性的属性值进行修改 */
.div1{
/* 调用关键帧名称 */
animation-name:frame1;
/* 关键帧执行时间 */
animation-duration: 3s;
/* 使用ease效果渐变 */
animation-timing-function: ease;
/* 动画播放无限次 */
animation-iteration-count: infinite;
/* 动画轮流反向播放 */
animation-direction:alternate;
}
/* 使用animation的缩写形式进行设置 */
.div2{
animation: frame2 3s ease infinite alternate;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果动态图
通过修改动画的属性来设置动画的播放效果的方式有两种
1.可以通过设置单个属性的属性值进行修改
2.使用animation的缩写形式设置，属性值的添加需按照顺序添加
来源：https://blog.csdn.net/QWH_PYTHON/article/details/100922032