CSS3 공을 움직이기위한 애니메이션

이미지가있는 볼을 왼쪽에서 오른쪽으로 그리고 뒤로 움직이기를 원합니다. 그것이 움직이는 동안 그것은 튀어 나와 움직여야 만합니다. 나는이 일을 할 수 없다. 어떤 제안?CSS3 공을 움직이기위한 애니메이션

HTML

<body> 
    <img src= "F:\New folder\1.jpg" /> 
    <img src="F:\New folder\2.jpg" /> 
    <img src="F:\New folder\3.jpg" /> 
    <img src="F:\New folder\4.jpg"/> 
</body>

CSS

img 
{ 
    width:30px; 
    height:30px; 
    border-style:solid; 
    border-width:3px; 
    border-radius:50%; 
    animation: spin 3s infinite linear alternate , bounce 2s 1 forward , movement 5s 3s 1 ; 
} 

@-webkit-keyframes bounce { 
0% { 
    top: 0; 
    -webkit-animation-timing-function: ease-in; 
} 
16% { 
    top: 190px; 
    -webkit-animation-timing-function: ease-out; 
} 
32% { 
    top: 50px; 
    -webkit-animation-timing-function: ease-in; 
} 
48% { 
    top: 190px; 
    -webkit-animation-timing-function: ease-out; 
} 
62% { 
    top: 100px; 
    -webkit-animation-timing-function: ease-in; 
} 
78% { 
    top: 190px; 
    -webkit-animation-timing-function: ease-out; 
} 
90% { 
    top: 150px; 
    -webkit-animation-timing-function: ease-in; 
} 
100% { 
    top: 190px; 
    -webkit-animation-timing-function: ease-out; 
    } 
} 

@-webkit-keyframes spin { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg); } 
} 

@-webkit-keyframes movement { 
0% { 
    top: 0%; 
    left: 0%; 
    } 
33% { 
    top: 0%; 
    left: 25%; 
    } 
66% { 
    top: 0; 
    left: 50%; 
    } 
    100% { 
    top: 0%; 
    left: 100%; 
    } 
}

출처

2013-10-02 vikneshwar

구문이 잘못되었습니다; 당신은 그렇게 여러 애니메이션을 설정할 수 없습니다. 다음과 같이

According to MDN

는 애니메이션에 대한 구문은 다음과 같습니다

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>

또한, 현재 크롬/사파리에서 작동하는 애니메이션의 -webkit 접두사를 사용해야합니다. 바운싱 애니메이션를 들어

- 작업이 애니메이션 위해서는 EXAMPLE HERE

, 당신은 키 프레임의 위치를 사용하고 있기 때문에 요소에 position:relative을 설정해야합니다.

.ball { position:relative; animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; }

또한이 같은 키 프레임 속성을 결합 할 수 있음을 주목할 필요가 : 회전 애니메이션를 들어

@keyframes bounce { 
    16%, 48%, 78%, 100% { 
     top: 190px; 
     animation-timing-function: ease-out; 
    } 
}

- 타이밍 기능에 대한 EXAMPLE HERE

사용 linear. 이렇게하면 부드러운 애니메이션이 가능합니다.

.ball { animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite; }

그것은 당신이이 경우에 키 프레임에서 0%를 제외 할 수 있음을 언급 할 가치 : 이동 애니메이션를 들어

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

- 요소가 시작하는 위치하는 경우 EXAMPLE HERE

키 프레임에 0% 값이 필요하지 않습니다.

.ball { animation: movement 3s linear infinite; -webkit-animation: movement 3s linear infinite; left:0; }

키 프레임 그러므로이 경우에 아주 간단합니다 :

@keyframes movement { 100% { left:100%; } }

결합 된 애니메이션-EXAMPLE HERE

모든 애니메이션이 동시에 발생하려면 , 단순히 키 프레임을 결합하십시오.

@keyframes combined { 16%, 48%, 78% { top: 190px; animation-timing-function: ease-out; } 32% { top: 50px; animation-timing-function: ease-in; } 62% { top: 100px; animation-timing-function: ease-in; } 90% { top: 150px; animation-timing-function: ease-in; } 100% { transform: rotate(360deg); top: 190px; animation-timing-function: ease-out; left:100%; } }

출처

2013-10-02 19:07:35

죄송 공을 주셔서 당신의 이동 코드를 수정해야, 그것을 작동합니다. 오른쪽에서 왼쪽으로 볼을 뒤로 이동하려면 어떻게해야합니까? – vikneshwar

@viks 내 업데이트를 참조하십시오. 도움이되는지 알려주세요. –

감사합니다. JoshC. 나는 대체 공만 튀고 싶다. 어떤 생각? – vikneshwar

또한 다시

@-webkit-keyframes movement { 
    0% { 
    left: 0%; 
    } 
    50% { 
    left: 100%; /* for moving right */ 
    } 
    100% { 
    left: 0%; /* for moving back or left */ 
    } 
}

출처

2013-10-02 19:15:37 singhiskng

CSS3 공을 움직이기위한 애니메이션

답변

관련 문제