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 для анимации для работы в Chrome/Safari.

Для подпрыгивая анимации - 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 Анимация для перемещения мяча

ответ

Смежные вопросы