Today, I learned custom animation and made a small case. Before writing a case, I need to know the following knowledge points:
1. Difference between custom animation and transition Animation:
Custom animation does not need to be triggered, transition animation needs to be triggered
2. Important attributes of transition Animation: animation, which is a shorthand attribute, is used to set six animation attributes, namely
Animation name: name of custom animation
Animation duration: animation duration
Animation timing function: buffer curve
Animation delay: waiting time
Animation iteration count: number of playback (infinite means countless playback)
Animation direction: Specifies whether the animation should be played back in turn.
3. Key frame: when using @ keyframes to create an animation, you need to bind it to a selector, otherwise it will not produce animation effect. You can use the keywords "from" and "to" to create a key frame, or you can use the percentage. This case uses the from and to keywords
The code is as follows:
<style>
*{margin: 0;padding: 0}
body{background: black}
.donghua{
width: 600px;
height: 200px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.donghua ul{
list-style: none;
width: 1800px;
position: absolute;
left: 0;
right: 0;
animation: run 10s linear 0s infinite;
}
img{
display: block;
}
.donghua li{
float: left;
cursor: pointer;
}
@keyframes run{
form{
left: 0;
}
to{
left: -1200px;
}
}
</style>
</head>
<body>
<div class="donghua">
<ul>
<li><img src="images/53/01.jpg" alt=""></li>
<li><img src="images/53/02.jpg" alt=""></li>
<li><img src="images/53/03.jpg" alt=""></li>
<li><img src="images/53/04.jpg" alt=""></li>
<li><img src="images/53/01.jpg" alt=""></li>
<li><img src="images/53/02.jpg" alt=""></li>
</ul>
</div>
</body>