이 코드에서 애니메이션이 제대로 작동하지 않습니다.

저는 CSS를 사용하여 애니메이션을 처음 사용합니다.이 코드에서 애니메이션이 제대로 작동하지 않습니다.

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="star.css"> 
 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/style.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <i class="rotate fa fa-anchor"></i> 
 
     <img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg"> 
 
    </body> 
 
</html>

출처

2016-08-23 Dream Hunter

는 스핀 애니메이션 키 프레임의 문제 – mplungjan

을 보여주는 예제를 만들 니펫 편집기를 사용하여? –

.spinner { 
 
    -webkit-animation:spin 0.5s linear infinite; 
 
    -moz-animation:spin 0.5s linear infinite; 
 
    animation:spin 0.5s linear infinite; 
 
} 
 
@keyframes spin { 
 
    0% { 
 
    transform: rotate(0); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
} 
 
-webkit-keyframes spin { 
 
    0% { 
 
    transform: rotate(0); 
 
    } 
 
    100% { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<img class="spinner" src="http://placehold.it/200x200">

출처

2016-08-23 08:03:42

당신이 해냈는데 .... 이것이 내가 정말로 필요로하는 것입니다. –

이

을 시도해보십시오 무엇 error.here 것은 내 코드 나 CSS 애니메이션을 사용하여 아이콘을 회전하는 코드를 개발하고, 그러나 그것은 작동하지 않습니다와 나는 확인할 수 없습니다

<i class=" fa fa-anchor fa-spin"></i>

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
}

<script src="https://use.fontawesome.com/79a4552de1.js"></script> 
 
     <i class=" fa fa-anchor fa-spin"></i> 
 
     <img class="fa-spin" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" style="width:100px;">

출처

2016-08-23 07:26:30

클래스를 제거하십시오 –

당신의 대답은이 질문에 좋은 해결책입니다.하지만 애니메이션 매개 변수를 조정할 때 어떻게 조정할 수 있습니까?. –

https://jsfiddle.net/vinaypiro/kvuqjv5z/ –

시도해보십시오.

CSS

.element { 
    display: inline-block; 
    background-color: #0074d9; 
    height: 100px; 
    width: 100px; 
    font-size: 1px; 
    padding: 1px; 
    color: white; 
    margin-right: 5px; 
    margin-left: 5px; 
    animation: roll 3s infinite; 
    transform: rotate(30deg); 
    opacity: .7; 
} 

@keyframes roll { 
    0% { 
    transform: rotate(0); 
    } 
    100% { 
    transform: rotate(360deg); 
    } 
} 


body, html { 
    height: 100%; 
} 


body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
</style>

HTML :

<div class="element"> 
</div> 
<div class="element"> 
</div> 
<div class="element"> 
</div>

Run Code

출처

2016-08-23 07:40:42 Anju

너는 나에게 진짜 물건을 준다.이게 나를 도울지도 모른다. –

.rotate { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
} 
 
@keyframes spin{ 
 
    0%{ 
 
    transform:rotate(0deg); 
 
    } 
 
    50%{ 
 
    transform:rotate(90deg); 
 
    } 
 
    100%{ 
 
    transform:rotate(180deg); 
 
    } 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="star.css"> 
 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/style.css" /> 
 
      <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <i class="rotate fa fa-anchor"></i> 
 
     <img class="rotate" src="https://i.stack.imgur.com/NiTEy.jpg"> 
 
    </body> 
 
</html>

출처

2017-01-13 10:38:14

이 코드에서 애니메이션이 제대로 작동하지 않습니다.

답변

관련 문제