<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<!-- Keyframes “关键帧”
@keyframes 动画的名称 {
from {}
to {}
}
@keyframes IDENT {
0% {
Properties:Properties value;}
50% {
Properties:Properties value;}
100% {
Properties:Properties value;
}}
-->
<style>
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(#fff, #000);
animation-name: myball;
animation-duration: 1000ms;
/* animation-timing-function:ease; */
animation-timing-function: linear;
animation-delay: 2s;
/* 延时 */
animation-iteration-count: infinite;
/* 循环播放 */
animation-direction: alternate;
}
/*关键帧属性
animation 动画简写
animation-name @keyframes动画名称。
animation-duration 动画一个周期所花费的时间，默认
animation-timing-function 动画的速度曲线 默认"ease"
animation-fill-mode 当动画不播放时，应用到元素的样式
animation-delay 动画何时开始 默认0
animation-iteration-count 动画被播放的次数 默认1
animation-direction 动画是否在下一周期逆向地播放 默认"normal"
animation-play-state 动画是否运行或暂停 默认"running" */
/* 定义关键帧 */
@keyframes myball {
from {
transform: translate(0);
}
to {
transform: translate(800px);
}
}
.box1 {
width: 100px;
height: 100px;
border-radius: 50%;
/* background-image: radial-gradient(#fff, #000); */
animation-name: myball1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes myball1 {
25% {
transform: translate(400px, 0);
background-color: aqua;
}
50% {
transform: translate(400px, 400px);
background-color: red;
}
75% {
transform: translate(0, 400px);
background-color: blue;
}
100% {
background-color: chartreuse;
transform: translate(0, 0);
}
}
.box2 {
width: 800px;
height: 380px;
font-size: 0px;
border: 2px solid #f00;
margin: 0 auto;
overflow: hidden;
}
.box2 .box3 {
white-space: nowrap;
animation: myimg 6s 2s infinite;
/* animation-name: myimg;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-delay: 2s; */
}
.box2 .box3:hover {
animation-play-state: paused;
}
@keyframes myimg {
33.3% {
transform: translateX(-100%);
}
66.6% {
transform: translateX(-200%);
}
100% {
transform: translateX(-300%);
}
}
.box4 {
width: 200px;
height: 312px;
background-image: url('img/walkingdead.png');
animation: walk 1s steps(10) infinite alternate,move 2s infinite alternate ease-in-out;
}
@keyframes walk {
0% {
background-position: 0 0;
}
100% {
background-position: -2000px 0;
}
}
@keyframes move {
0% {
margin-left: 0;
}
100% {
margin-left:calc(100% - 200px);
}
}
.box5 {
width: 160px;
height: 105.5px;
background-image: url('img/chuanpu.png');
animation: walks 0.2s steps(4) infinite,move1 0.5s infinite linear;
}
@keyframes walks {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -422px;
}
}
@keyframes move1{
0%{
transform: scale(1,1) rotate(0deg);
}
100%{
transform:scale(2,2) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="box2">
<div class="box3">
<img src="img/01.jpg" alt="" width="800px">
<img src="img/02.jpg" alt="" width="800px">
<img src="img/03.jpg" alt="" width="800px">
<img src="img/01.jpg" alt="" width="800px">
</div>
</div><br>
<div class="box4">
</div>
<br>
<div class="box5">
</div>
</body>
</html>