学习目标
掌握CSS3过渡
掌握transition的子属性
掌握CSS3动画
什么是过渡？
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
语法规则
选择器{
transition:property duration timing-function delay
}
tansition属性实现简单的动画效果
transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性
transition属性的常用子属性主要包括：
property：规定应用过渡的CSS属性的名称
取值：
•none：没有属性会获得过渡效果 •all：默认值，所有属性获得过渡效果 •property:定义 应用过渡效果的CSS属性名称列表
duration：定义过渡效果花费的时间
取值：
•time值：以秒或毫秒计，默认是0，意味着没有任何效果
timing-function：规定过渡效果的时间曲线
取值：
linear:规定以相同速度开始至结束的过渡效果
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值
delay：规定开始之前需要等待的时间
取值：
time值：以秒或毫秒计，默认是0
CSS变形
transform属性允许对元素应用2D转换，常见的2D转换：
倾斜、旋转、缩放、移动
语法规则
选择器{
transform:none | transiform-functions
}
tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
思考：
有了过渡和变形，为什么还需要动画？
CSS样式在多个状态中进行转换，主要组成部分是:
1.一组定义的动画关键帧
2.描述该动画的CSS声明
关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。
关键帧语法
@keyframes animationname{
keyframes-selector{css-style}
}
animationname是当前动画的名称
keyframes-selector:是关键帧选择器
css-style:当前关键帧的动画状态
animation属性
animation属性，用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。
语法规则
选择器{
animation:name duration timing-function
delay iteration-count
}
tansform-functions:用于设置变形函数，可以是一个或多个变形函数列表
animation子属性
animation-name：规定@keyframes动画的名称
取值：
•keyframe name：规定需要绑定到选择器的keyframe的名称 •none:规定无动画效果（可用于覆盖来自级联的动画)
animation-duration：规定动画完成一个周期所花费的时间
取值：
time值：以秒或者毫秒计算，默认是0
animation-timing-function：规定过渡效果的时间曲线
取值：
•linear:规定以相同速度开始至结束的过渡效果 •ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。 •ease-in：规定以慢速开始的过渡效果 •ease-out：规定以慢速结束的过渡效果 •ease-in-out：规定以慢速开始和结束的过渡效果 cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。
animation-delay：规定开始之前需要等待的时间
取值：
•time值：以秒或毫秒计，默认是0
animation-iteration-count：规定动画播放的次数
取值：
•n：定义动画播放次数的数值，默认为1 •infinite：规定动画应该为无限次播放
总结
案例演示：
<!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>
img{
border-radius: 20px;
}
#box1{
margin-left: 300px;
margin-top: 30px;
float: left;
text-align: center;
}
#box2{
margin-left: 30px;
margin-top: 30px;
float: left;
text-align: center;
}
#box3{
margin-left: 30px;
margin-top: 30px;
float: left;
text-align: center;
}
#box4{
margin-left: 30px;
margin-top: 30px;
float: left;
text-align: center;
}
.shake{
width: 200px;
height: 150px;
}
.shake:hover {
animation: shake 800ms ease-in-out;
}
@keyframes shake { /* 水平抖动，核心代码 */
10%, 90% { transform: translate3d(-1px, -2px, 0); }
20%, 80% { transform: translate3d(+2px, +2px, 0); }
30%, 70% { transform: translate3d(-4px, -4px, 0); }
40%, 60% { transform: translate3d(+4px, +4px, 0); }
50% { transform: translate3d(-4px, -4px, 0); }
}
</style>
</head>
<body>
<div id="box1">
<img class ="shake" src="./图片排列/m1.jpg" alt=""><br>
<span>猫和老鼠</span>
</div>
<div id="box2">
<img class ="shake" src="./图片排列/m2.jpg" alt=""><br>
<span>猫和老鼠</span>
</div>
<div id="box3">
<img class ="shake" src="./图片排列/m3.jpg" alt=""><br>
<span>猫和老鼠</span>
</div>
<div id="box4">
<img class ="shake" src="./图片排列/m4.jpg" alt=""><br>
<span>猫和老鼠</span>
</div>
</body>
</html>
实现效果
