I have two paragraphs with text in it. i want to animate this text. what i actually want is to move first paragraph from left on x-axis and second paragraph from right to left.
my code is working only for one direction either left or right.
here:
<!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>
i want to move second paragraph from right to left and first one from left to right.
what could be the possible solution?
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;}
}
inside #text in css add
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
http://jsfiddle.net/sxscmhy7/
Related
I found this SOLUTION but how would I add one more
like this?
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite; /* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite; /* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite; /* Opera 12+ */
animation: myOrbit 4s linear infinite; /* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
.animation_delay_1{
animation-delay: 3s;
}
<div class="logo_carousel">
<img id="logo_center"src="logo.png">
<img class="saturn" src="logo1.png">
<img class="saturn animation_delay_1" src="logo2.png">
</div>
I tried to add animation-delay, But this is not quite what I need. The logo just starts spinning later, but I need it to spin immediately but from a different position.
.saturn {
position: absolute;
left: 315px;
top: 143px;
-webkit-animation: myOrbit 4s linear infinite;
/* Chrome, Safari 5 */
-moz-animation: myOrbit 4s linear infinite;
/* Firefox 5-15 */
-o-animation: myOrbit 4s linear infinite;
/* Opera 12+ */
animation: myOrbit 4s linear infinite;
/* Chrome, Firefox 16+,
IE 10+, Safari 5 */
}
#keyframes myOrbit {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
.animation_delay_1 {
animation-delay: 0.5s;
}
.animation_delay_3 {
animation-delay: 0s;
}
<div class="logo_carousel">
<img id="logo_center" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_2" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
<img class="saturn animation_delay_1" src="https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1">
</div>
You would add another image with a new animation class:
<img class="saturn animation_delay_3" src="logo2.png">
Then add a new animation CSS with a new delay such as 4s.
.animation_delay_3{
animation-delay: 4s;
}
Results: https://codepen.io/MistaPrime/pen/YzzXeNJ
Im trying to create an animation for a "help window". I would like it to start or have the the image/animation after X seconds, but am having issues as the animation-delay property isn't applicable here as it pauses the still image before playing it.
Any ideas for webkits or properties to try here?
See link here;
http://hardystewartdesign.com/dist/project.html
.hello {
width: 211px;
height: 115px;
background: none;
position: fixed;
bottom: 0px;
left: 0px;
-webkit-animation: mymove 3s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation: mymove 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: -300px;}
to {left: 0px;}
}
#keyframes mymove {
from {left: -300px;}
to {left: 0;}
}
just change left: 0 to left: -300px in the .hello class
I'm trying to get several animations running at the time in a small banner. A change of position with an opacity change in the first line of text, a simple opacity change in another one and so on. The problem is that the first animation works perfectly and the second one (and everything after that) never runs. I used exactly the same code as in the first one and just changed the name of the animation as well as the class but it's still not working.
This is the code I used for the first ones, (H1 works just fine but h2, h3 and the rest of the animation don't)
My HTML
<h1> Smart travel,
<br> at your fingertips. </h1>
<h2> Our app for Iphone and Ipad is here </h2>
<h3><strong>Download </strong> it today. </h3>
My CSS (By the way, some lines above all of this is set up as position: absolute)
h1 {
position: relative;
right: 0px;
-webkit-animation: mymove 1s ; /* Chrome, Safari, Opera */
animation: mymove 1s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
transform: opacity: 0;
}
25% {transform: translate3d(90px, 0px, 0px);
opacity:0;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 100;
}
h2 {
position: relative;
-webkit-animation: mymove2 3s ; /* Chrome, Safari, Opera */
animation: mymove2 3s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove2 {
0% {
opacity: 0;
}
50% {
opacity:0;
}
100% {
opacity: 100;
}
You didn't close this #-webkit-keyframes mymove { Check this fiddle
h1 {
position: relative;
right: 0px;
-webkit-animation: mymove 1s;
/* Chrome, Safari, Opera */
animation: mymove 1s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
0% {
transform: opacity: 0;
}
25% {
transform: translate3d(90px, 0px, 0px);
opacity:0;
}
100% {
transform: translate3d(0px, 0px, 0px);
opacity: 100;
}
}
h2 {
position: relative;
-webkit-animation: mymove2 3s;
/* Chrome, Safari, Opera */
animation: mymove2 3s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove2 {
0% {
opacity: 0;
}
50% {
opacity:0;
}
100% {
opacity: 100;
}
<h1> Smart travel,
<br> at your fingertips. </h1>
<h2> Our app for Iphone and Ipad is here </h2>
<h3><strong>Download </strong> it today. </h3>
I guess this comes from an error in your CSS code :
transform: opacity: 0; /* Syntax error there */
/* should be */
opacity: 0;
transform: translate3d(0px, 0px, 0px); /* or whatever starting value you want */
You should also note that you have prefixed the keyframes of your animation (#-webkit-keyframes mymove), this can only work on wekbit based browsers.
The last brace is missing, but it's not considered as an error (the last brace / semicolon are optional).
I cannot get this animation to work for the life in me. It is supposed to move the square from side to side and change the background colour. Other people seem to be using the EXACT same code and getting the desired results. I have tried different supported browsers and even different computers to make sure it wasn't the computer. Any help will be appreciated.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Animation</title>
<link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
<h1>CSS3 Animation</h1>
<div class="square"></div>
</body>
</html>
CSS:
.square {
border: 3px solid black;
height: 50px;
width: 50px;
clear: both;
-webkit-animation-name: keyframeMoveDiv;
animation-name: keyframeMoveDiv;
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
-webkit-transition-duration: 5s;
transition-duration: 5s;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
#keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; margin-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
#-webkit-keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; marign-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
I was using this in my css:
-webkit-transition-duration: 5s;
transition-duration: 5s;
When it needs to be animation duration instead. So:
-webkit-animation-duration: 5s;
animation-duration: 5s;
Demo
.square {
border: 3px solid black;
height: 50px;
width: 50px;
clear: both;
-webkit-animation: keyframeMoveDiv 5s; /* Chrome, Safari, Opera */
animation: keyframeMoveDiv 5s;
/* -webkit-animation-name: keyframeMoveDiv;
animation-name: keyframeMoveDiv;*/
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
/* -webkit-transition-duration: 5s;
transition-duration: 5s;*/
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
#keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; margin-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
#-webkit-keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; marign-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
i have this code which is rotating the hr (a line) from middle, i want to rotate that Line from it's bottom
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
/* Standard syntax */
#keyframes mymove {
50% {transform: rotate(180deg);}
}
</style>
</head>
<body>
<p>Gradually rotate the DIV element 180 degrees, and back:<p>
<div id="myDIV">
<hr>
</div>
how to rotate a line or an image from its bottom just like a Dial whose niddle do rotate
You can try it.
#myDIV {
margin: auto;
width: 50px;
background-color: coral;
color: white;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
transform-origin: top left;
}
#-webkit-keyframes mymove {
50% {-webkit-transform: rotate(180deg);}
}
#keyframes mymove {
50% {transform: rotate(180deg);}
}
and change transform-origin value according your need, it can be numeric.