css - Rotate 7 times then Ease -


Hello, I am trying to animate an element, which makes it rotate 7 times and slows down, I have the work of spinning, I need to reduce it, and to spin it from one to the other Using keyframe, do I have to frame it with frames or any other way? 

  @keyframes spin {{transform: rotate (0deg); } {Transcend: to rotate (360 degrees); }}. Spin.animated {animation-name: spin; Animation-period: 400 mms; Animation-repetition-count: 7; Animation-timing-function: linear; }   
 
 
 You mean this:  
 
 
 
 . Spin {width: 100px; Height: 100px; Background: Red; } @ -webkit-keyframes spin {to {transform: rotate (0deg); } {Transform: rotate (2520 degrees); }}. Spin.animated {-webkit- animation-name: spin; -WebKit-Animation-duration: 2800ms; Webkit-animation-iteration-count: 1; Webkit-animation-time-function: easy; }  
 
  & lt; Div class = "spin-animated" & gt; & Lt; / Div & gt;  
 
 
 
 
 Or even better: 
 
 
 
 
  .spin {width: 100px; Height: 100px; Background: Red; }. Spin: Hover (Transform: Rotate (2520 degrees); Transition: 3s easily out; }  
 
  & lt; Div class = "spin" & gt; & Lt; / Div & gt;

Comments

Post a Comment