1. The role of CSS3 animation
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。Two, transition: balance transition
1) Function
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值2) Speed Curve for Speed Effect (Speed Curve for Animation):
| linear | Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0) |
| ease | Smooth transition. Equivalent to Bezier curve(0.25, 0.1, 0.25, 1.0) |
| ease-in | From slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0) |
| ease-out | From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0) |
| ease-in-out | From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0) |
| step-start | Immediately jump to the state of each end frame of the animation |
The graph is as follows:
Abbreviation : transition:all/specific attribute value motion time s/ms delay time s/ms animation type
The case is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
.box{
width: 1020px;
height: 800px;
margin: 0 auto;
}
.con{
width: 500px;
height: 394px;
background:url(./images/bg.jpg);
margin: 10px 10px 6px 0;
float: left;
position: relative;
overflow: hidden;
}
.con img{
position: absolute;
transition-duration: 2s;
}
.con img:nth-child(1){
left: 30px;top: 34px;
width: 437px;height: 317px;
}
.con:hover img:nth-child(1){
width: 285px;height: 203px;
}
.con img:nth-child(2){
left:350px;top: -100px;
}
.con:hover img:nth-child(2){
left:350px;top: 34px;
}
.con img:nth-child(3){
left:100%;top: 143px;
}
.con:hover img:nth-child(3){
left:350px;
}
.con img:nth-child(4){
left:350px;top: 100%;
}
.con:hover img:nth-child(4){
top: 258px;
}
.con img:nth-child(5){
left:184px;top: 100%;
}
.con:hover img:nth-child(5){
top: 258px;
transition-delay: 0.3s;
}
.con img:nth-child(6){
left:30px;top: 100%;
}
.con:hover img:nth-child(6){
top: 258px;
transition-delay: 0.5s;
}
.con4 img:nth-child(1){
left:118px;top: 29px;
width: 257px;height: 340px;
}
.con4:hover img:nth-child(1){
left: 23px;
width: 257px;height: 340px;
}
.con4 img:nth-child(2){
left:100%;bottom: 100%;
}
.con4:hover img:nth-child(2){
left:335px;bottom:198px;
}
.con4 img:nth-child(3){
left:100%;top: 100%;
}
.con4:hover img:nth-child(3){
left:335px;top:207px;
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<img src="./images/con1-1.jpg" alt="">
<img src="./images/con1-2.jpg" alt="">
<img src="./images/con1-3.jpg" alt="">
<img src="./images/con1-4.jpg" alt="">
<img src="./images/con1-5.jpg" alt="">
<img src="./images/con1-6.jpg" alt="">
</div>
<div class="con">
<img src="./images/con2-1.jpg" alt="">
<img src="./images/con2-2.jpg" alt="">
<img src="./images/con2-3.jpg" alt="">
<img src="./images/con2-4.jpg" alt="">
<img src="./images/con2-5.jpg" alt="">
<img src="./images/con2-6.jpg" alt="">
</div>
<div class="con">
<img src="./images/con3-1.jpg" alt="">
<img src="./images/con3-2.jpg" alt="">
<img src="./images/con3-3.jpg" alt="">
<img src="./images/con3-4.jpg" alt="">
<img src="./images/con3-5.jpg" alt="">
<img src="./images/con3-6.jpg" alt="">
</div>
<div class="con4 con">
<img src="./images/con4-1.jpg" alt="">
<img src="./images/con4-2.jpg" alt="">
<img src="./images/con4-3.jpg" alt="">
</div>
</div>
</body>
</html>By combining the above knowledge points, the effect that can be achieved is as follows. When you put the mouse in the box, the picture floats in and reaches the designated position. After the mouse slides away, the picture disappears, leaving only a large picture:
Three, animation: animation
Animations are generally created through @keyframes rules. During the animation, you can change this set of CSS styles multiple times. Specify when the change occurs as a percentage, or via the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation.
animation vs transition
相同点：都是随着时间改变元素的属性值。
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达
到一种动画的效果，css3的animation就需要明确的动画属性值Animation property settings
| animation-name |
The name of the calling keyframe |
| animation-duration |
the duration of the animation |
| animation-timing-function |
The type of animation used (uniform linear, acceleration, deceleration, Bezier curve) |
| animation-delay |
animation delay |
| animation-iteration-count |
The number of animation movements (1 movement by default) infinite (infinite loop) |
animation-direction |
direction of movement |
| Attribute value: - reverse: Run in the opposite direction (let keyframes execute from back to front) |
|
| - alternate: The animation runs normally and then runs in the opposite direction, and continues to run alternately |
|
| - alternate-reverse: The animation runs in the reverse direction and then in the forward direction, and continues to run alternately |
|
| animation-play-state |
Attribute value: paused pause running motion |
Commonly used writing methods: animation: the name of the key frame, the time of animation motion, linear (uniform speed), the time of animation delay
4. Definition of key frame
Unlike transition animations, which can only define the first and last states, key frame animations can define multiple states, or in terms of key frames, transition animations can only define two key frames, the first frame and the last frame, and key frames Animation can define as many key frames as desired, so more complex animation effects can be achieved.
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
img{
display:block;
}
.fixed{
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
}
body{
background:url(./images/2.jpg) no-repeat;
/* 设置图片大小 */
background-size:100% 100%;
}
/* 轮牌转动 */
.bigImg{
animation: imgRotate 20s linear infinite;
}
.box{
width:768px;
height:768px;
animation: imgRotate 20s linear infinite;
}
/* 把小孩的图片定位在box里面 */
.box img{
/* 改变变形原点 */
transform-origin:center 20px;
/* 让图片反方向转动 reverse*/
animation: imgRotate 20s reverse linear infinite;
}
.pic1{
position:absolute;
left: 43%;
top: 29px;
}
.pic2{
position:absolute;
left: 43%;
bottom: -84px;
}
.pic3{
position:absolute;
left: 12%;
bottom: -22px;
}
.pic4{
position:absolute;
left: 73%;
bottom: -6px;
}
.pic5{
position:absolute;
left: 88%;
bottom: 234px;
}
.pic6{
position:absolute;
left: -3%;
bottom: 226px;
}
.pic7{
position:absolute;
left: 15%;
bottom: 480px;
}
.pic8{
position:absolute;
left: 83%;
bottom: 440px;
}
.box_tit{
position: absolute;
left: 0;top: 0;
right: 0;bottom: 0;
margin: auto;
}
/* 关键帧 */
@keyframes imgRotate{
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<img src="./images/fsw.png" alt="" class="bigImg fixed">
<img src="./images/big-title.png" alt="" class="box_tit">
<div class="box fixed">
<img class="pic1" src="./images/girl.png" alt="">
<img class="pic2" src="./images/girls.png" alt="">
<img class="pic3" src="./images/boy.png" alt="">
<img class="pic4" src="./images/dog.png" alt="">
<img class="pic5" src="./images/hairboy.png" alt="">
<img class="pic6" src="./images/mimi.png" alt="">
<img class="pic7" src="./images/mudog.png" alt="">
<img class="pic8" src="./images/shamegirl.png" alt="">
</div>
</body>
</html>Renderings:
