本文深入探讨了CSS动画的各种特性，包括动画的关键帧、运动形式、重复次数、延迟时间及动画方向等，通过实例演示了如何使用animation属性实现元素的平移、变换及颜色变化，同时还介绍了animate.css库的使用方法。
<!--建议直接复制丢到vscode去看，很清楚-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
<!--
animation动画
animation-name 设置动画的名字
animation-duration 动画的持续时间
animation-delay 动画的延迟时间
animation-iteration-count 动画的重复次数，默认值是1，infinite无限次数
animation-timing-function 动画的运动形式
animation-fill-mode 规定动画播放之前或之后，其动画效果是否可观
none 默认 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards 在延迟的情况下，让0%在延迟前生效
forwards 在运动结束之后，停到结束位置
both backwards和forwards同时生效
animation-direction 属性定义是否应该轮流反向播放动画
alternate 一次正向（0%-100%）,一次反向（100%-0%）
reverse 永远都是反向，从（100%-0%）
normal 默认 永远都是正向，从（0%-100%）
animate css库
网址：https://animate.style/
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/> 直接复制就行link到最前面
然后去官网找怎么用，复制样式名字添加到class中就行（具体规则根据官网定 版本不同规则不同）
注：
0%就是form 100%就是to
用动画可以用很多关键帧
-->
<style>
.box1 {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 30px auto;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
/* animation-name: myBox;
animation-duration: 4s; */
animation: myBox 4s 1s infinite linear;
}
@keyframes myBox {
form {
transform: translate(0, 0);
}
to {
transform: translate(200px, 0);
}
}
.div1,
.div2,
.div3,
.div4 {
width: 100px;
height: 100px;
background-color: rosybrown;
margin: 5px;
}
.div1 {
animation: 2s 1s move;
}
.div2 {
animation: 2s 1s move;
animation-fill-mode: backwards;
}
.div3 {
animation: 2s 1s move;
animation-fill-mode: forwards;
}
.div4 {
animation: 2s 1s move;
animation-fill-mode: both;
}
@keyframes move {
0% {
transform: translate(0, 0);
background-color: royalblue;
}
100% {
transform: translate(500px, 0);
}
}
.fangxiang01,
.fangxiang02,
.fangxiang03 {
width: 100px;
height: 100px;
margin-top: 20px;
background-color: salmon;
animation: 1s fx infinite;
}
.fangxiang01 {
animation-direction: alternate;
}
.fangxiang02 {
animation-direction: normal;
}
.fangxiang03 {
animation-direction: reverse;
}
@keyframes fx {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(200px, 0);
}
}
.donghua {
width: 100px;
height: 50px;
margin-top: 50px;
background-color: salmon;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="fangxiang01"></div>
<div class="fangxiang02"></div>
<div class="fangxiang03"></div>
<div class="donghua animate__animated animate__bounce"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
