CSS 애니메이션이 작동하지 않습니다.

여기 코드가 있는데, 나는 틀린 것을 이해하지 못합니다.CSS 애니메이션이 작동하지 않습니다.

은 또한, 간단한 애니메이션을 -webkit- 사용하지만, 화면 전체의 개체를 이동하려는 어떤 차이를하지 않았다 시도

HTML :

<body> 

    <h1 class='cloud'> 
    SKILLS 
    </h1> 

    <h1 class='balloon'> 
    WORKS 
    </h1> 

</body>

CSS :

.cloud { 
     background: url(../image/cloudskills.svg)no-repeat; 
     height:100px; 
     width:130px; 
     text-indent: -999em; 
     animation: cloud 5s linear infinite; 
     -webkit-animation: cloud 5s linear infinite; 
    } 

    @-webkit-keyframes cloud { 
     0%, 100% { 
     left: 0%; 
    } 
     50% { 
     left: 100%; 
    } 
    } 

    .balloon { 
    background: url(../image/balloonworks.svg)no-repeat; 
    width: 100px; 
    height: 130px; 
    text-indent: -999em; 
    animation: balloon 5s linear infinite; 
    } 

    @keyframes balloon{ 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
    }

출처

2014-10-05 hkk

제거를 이동하는 키 프레임에 margin를 사용할 수 있도록하기 위해 16,은 당신의 코드에서 here' 코드를 입력합니다. – hutchbat

Js Fiddle

요소가 일부 애니메이션 position 그렇게 aboslute 또는 relative을 부여해야 또는`요소를

.cloud { 
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat; 
    height:100px; 
    width:130px; 
    background-size:100px auto; 
    text-indent: -999em; 
    animation: cloud 5s linear infinite; 
    -webkit-animation: cloud 5s linear infinite; 
    position:relative; 
} 
@-webkit-keyframes cloud { 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
} 
.balloon { 
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat; 
    background-size:100px auto; 
    width: 100px; 
    height: 130px; 
    text-indent: -999em; 
    animation: cloud 5s linear infinite; 
    -webkit-animation: cloud 5s linear infinite; 
    position:relative; 
} 
@-webkit-keyframes balloon { 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
}

출처

2014-10-05 13:32:40

나는 약간의 코드 만 바꿨다. http://jsfiddle.net/2gbngtxp/

@-webkit-keyframes cloud { 
    0% { 
    left: 0; 
} 
    50% { 
    margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/ 
} 
100%{ 
    left:0; 
}

출처

2014-10-05 13:28:30 Akshay

CSS 애니메이션이 작동하지 않습니다.

답변

관련 문제