текстовая анимация в html

У меня есть два абзаца с текстом в нем. Я хочу анимировать этот текст. то, что я действительно хочу, - это перемещение первого абзаца слева на оси х и второго абзаца справа налево.текстовая анимация в html

мой код работает только в одном направлении слева или справа.

здесь:

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#text { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {top: 200px;} 
     to {top: 0px;} 
     } 

@keyframes mymove { 
     from {top: 0px;} 
     to {top: 100px;} 
     } 

#text1 { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {right: -200px;} 
     to {right: 0px;} 
     } 

@keyframes mymove { 
     from {top: 0px;} 
     to {top: 100px;} 
     } 

</style> 
</head> 
<body> 
     <p id="text">Some text goes here</p> 
     <p id="text1">text display animation</p> 
</body> 
</html>

я хочу, чтобы переместить второй пункт справа налево и первый слева направо. Какое может быть возможное решение?

источник

2015-01-07 DDay

Это из-за повторяющегося имени 'mymove'. Используйте уникальный идентификатор для каждой анимации. –

DEMO

#text { 
     position:relative; 
     -webkit-animation: mymove infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
     from {left: 200px;} 
     to {left: 0px;} 
     } 

@keyframes mymove { 
     from {left: 200px;} 
     to {left: 0px;} 
     } 

#text1 { 
     position:relative; 
     -webkit-animation: mymove1 infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
     animation: mymove1 infinite; 
     animation-duration: 2s; 
     } 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove1 { 
     from {right: 200px;} 
     to {right: 0px;} 
     } 

@keyframes mymove1 { 
     from {right: 200px;} 
     to {right: 0px;} 
     }

источник

2015-01-07 06:28:14 himanshu

Спасибо, что работает для меня! что, если это будет только один раз, тогда он должен остановиться до определенной позиции. просто дай мне подсказку. Я сделаю это сам. btw спасибо! – DDay

просто удалить бесконечный код – himanshu

#text { position: relative; -webkit-animation: mymove; -webkit-animation-duration-2s; анимация: mymove; анимация-продолжительность: 2 с; } – himanshu

внутри #text в CSS добавить

-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */ 
animation-direction: reverse;

http://jsfiddle.net/sxscmhy7/

источник

2015-01-07 06:27:55 AtanuCSE

текстовая анимация в html

ответ

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