这个是我要的效果，箭头代码如下
.page4 .arrow-up{
position: absolute;
width: 80/100rem;
height: auto;
margin-left: 50%;
left:-40/100rem;
bottom: 5%;
animation: moveIconUp ease 2s both infinite;
-webkit-animation: moveIconUp ease 2s both infinite;
transform:rotate(180deg);
-webkit-transform:rotate(180deg);}
@-webkit-keyframes moveIconUp {
0% {
-webkit-transform: translateY(120%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(-160%);
opacity: 0;
}}
出来的效果是
箭头ui切出来是向下的，我是想用transform:rotate(180deg)把他转过来，不知道那里错了
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
A transform is set in your animation moveIconUp to overwrite it. Separate multiple attributes of transform with spaces, otherwise the ones written later will overwrite the previous ones, like this:
transform:translateY(-160%) rotate(180deg)Each attribute in transform cannot be set individually
Set as block element