CODEWITHSUNDEEP
htmlcss
Stackk15
Stackk15

Reputation: 29

Using transform:rotate in % animation css

I have an animation which should rotate 360 degrees 50% into the animation, but it's not working.

.w11 {
top:9px; font- 
size:50px; color: black; opacity: 0.5;}

.w11 {animation: movefirst 
12s linear infinite; 
animation-direction: 
alternate-reverse; 
position: relative;} 

@keyframes movefirst {0%
{left:23px;}50%
{transform:rotateX(3
60deg);}
100%{left:200px;}}

<div class="w11">e</div>

Upvotes: 0

Views: 41

Answers (1)

symlink
symlink

Reputation: 12209

It works, you just had some extra space typos in your code.

.w11 {
  position: relative;
  top: 9px;
  font-size:50px; 
  opacity: 0.5;
  animation: movefirst 12s linear infinite;
  animation-direction: alternate-reverse;
}

@keyframes movefirst {
  0% {
    left: 23px;
  }
  50% {
    transform: rotateX(360deg);
  }
  100% {
    left: 200px;
  }
}
<div class="w11">e</div>

Upvotes: 1

Related Questions