css3中的动画了解一下
程序员文章站
2022-03-16 19:22:17
...
首先，在文章开头，想把笔记整理给大家看看，不知道大家对css动画的理解怎么样，
如果某个动画有可能执行多次， 就可以把这个动画封装起来
* @keyframes anmiatename {0%{} 50%{} 100%{}}
* % 代表的是时间，假如动画执行一次需要1秒，那么50%就代表动画执行到0.5s时的状态， 0% 代表起始位置， 50% 中间位置， 100% 代表结束位置
* 如果某个节点的位置和起始位置一致， 这个代码段就可以不写
* 如果要转弯， 那么关键节点就是转折点，就添加转折点的百分比， 如果不转弯，那关键节点就是终点的位置， 就添加结束点的百分比
*封装完动画之后，给需要添加动画的元素一个animation的属性
如果来使用动画
animation: dodo 0.3s infinite 2s forwards;
参数1： 动画的名字
参数2： 单次动画的执行时间
参数3： 动画的执行次数， 如果不写， 执行一次 ，如果写10， 执行10次， infinite无限次
参数4： 2s延迟2秒执行
参数5： 是否保留动画结束时的状态。 如果不想保留， 就不写
3、接下来给大家展示一个简单的动画：
4、其实代码很简单，运用的就是上面的知识点，也许这就是传说中的毫无技术含量吧......
<!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>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #fff;
}
img{
width: 200px;
height: 200px;
}
.image1 {
position: absolute;
bottom: 100px;
left: 100px;
transform: translate(0px, 0px);
/* 动画的使用 */
animation: shake 0.2s 5 0.2s , run 5s 5s infinite;
}
.image2{
position: absolute;
bottom: 400px;
left: 100px;
transform: translate(0px, 0px);
/* 动画的使用 */
animation: run 5s 2s infinite ;
}
/* 动画的封装 */
@keyframes shake {
/* 0%, 50%, 100% 代表的是时间， 假如动画执行一次用时1秒钟，那么50%就代表0.5秒的时候 */
/* 0% {
transform: translate(0px, 0px);
} */
50% {
transform: translate(0px, 20px);
}
/* 100% {
transform: translate(0px, 0px);
} */
}
@keyframes run {
40% {
transform: translate(1000px, 0px);
}
60% {
transform: translate(1000px, 0px) rotateY(180deg) ;
}
80% {
transform: translate(0px, 0px) rotateY(180deg) ;
}
}
</style>
</head>
<body>
<img class="image1" src="./d53f8794a4c27d1e5fb0348410d5ad6edcc438df.gif" alt="">
<img class="image2"src="./u=4087242791,1543822195&fm=27&gp=0.jpg" alt="">
</body>
</html>
<!--
1. 我们可以使用@keyframes来封装一个动画， 需要给动画指定一个名字， 然后在大括号上，写入关键节点的参数
2. 关键节点，要用 50% {} 这种语法来实现。 注意： 这个百分号代表的时间。 假如动画执行一次需要1秒， 那么50%就代表动画执行到0.5s时的状态
3. 关键节点：如果动画有转弯，那么关键节点，就是转折点。 如果动不转弯; 如果动画不转弯，那么关键节点，就是终点的位置
4. 封装完动画之后，给需要添加动画的元素一个 animation的属性， 指定动画的名字， 动画单次执行的时间， 动画执行的次数，动画延迟执行时间， 动画效的果 （后面这三个参数与transition里面的三个参数是一致的）， 如果我们想要保留动画执行完成之后的状态，需要在后面加一个 forwards的属性值。
-->