将 > 旋转90度箭头朝下，添加animation动画后，> 的箭头方向又变回了朝右，怎么解决呢？

<!doctype html>

<html>

<head>

<title>animation 动画效果</title>

<style>

div{ font-family:Arial; font-size:72px; font-weight:bold; position:fixed; left:0; right:0; bottom:25px;;width:30px; height:30px; margin:auto; transform:rotate(90deg); animation:jt 0.3s infinite alternate 0.5s running;}

@keyframes jt{

from{ transform:translate(0,10px)}

to{ transform:translate(0,0)}

}

</style>

</head>

<body>

</body>

</html>

江南京华梦3822496

浏览 1524回答 1

1回答

woshiajuana

因为你animation动画有transform ，他覆盖了你之前的那个transform:rotate旋转属性解决方法的话，@keyframes jt{from{ transform: rotate(90deg), translate(0,10px)}to{ transform: rotate(90deg), translate(0,0)}}

随时随地看视频慕课网APP