为什么打开注释后执行动画, 元素本身的旋转会失效?
来源：2-18 编程练习
tangdou123
2020-12-08 16:31:19
<!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>
div{
font-family: Arial;
font-size: 36px;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
bottom: 20px;
/* animation: jiantou 1.5s ease-out 0s infinite; */
transform: rotate(90deg);
}
@keyframes jiantou {
0% {
transform: translate(0, 0);
}
40% {
transform: translate(0, 15px);
}
80%{
transform: translate(0, 5px);
}
100% {
transform: translate(0, 15px);
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
2回答
-
同学你好，问题解答如下：
打开注释后，元素的transform属性就会受@keyframes中的transform属性控制（transform属性发生了覆盖），由于动画中的transform只设置了translate，而没有设置rotate，所以元素之前设置的旋转就会失效。
可做如下修改：
祝学习愉快!
0h020-12-09 -
好帮手慕久久
2020-12-09
同学你好，理解正确。祝学习愉快！
0
相似问题