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
Related
This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 7 years ago.
Look at the css below. bottom:0 doesn't get applied at all once the animation is over
div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
font-weight: bold;
-webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
animation: mymove 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
div:empty {
-webkit-animation: mymoveClose 1s; /* Chrome, Safari, Opera */
animation: mymoveClose 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Standard syntax */
#keyframes mymove {
from {bottom: -30px;}
to {bottom: 0px;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
/* Standard syntax */
#keyframes mymoveClose {
from {bottom: 0px;}
to {bottom: -30px;}
}
Here is the fiddle
http://jsfiddle.net/uk4gxr8c/
You need to specify an animation-fill-mode.
In this case forwards will cause the animation to end at the final value.
Per MDN
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:
setTimeout(function() {
document.getElementById('div1').innerHTML = '';
}, 3000);
div {
width: 100%;
position: absolute;
z-index: 999;
background: black;
color: white;
padding: 10px;
height: 30px;
font-weight: bold;
box-sizing: border-box;
-webkit-animation: mymoveClose 1s;
/* Chrome, Safari, Opera */
animation: mymoveClose 1s linear forwards;
}
div:empty {
-webkit-animation: mymove 1s;
/* Chrome, Safari, Opera */
animation: mymove 1s linear forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Standard syntax */
#keyframes mymove {
from {
bottom: -30px;
}
to {
bottom: 0px;
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
/* Standard syntax */
#keyframes mymoveClose {
from {
bottom: 0px;
}
to {
bottom: -30px;
}
}
<div id="div1">linear</div>
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 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/
I currently have the following code which fades in the header. I want the header to stay for about 3 seconds, then fadeout, automatically loading the main page of the website. It seems its quite difficult to do that. Can anyone help?
.fade1 {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Try this...The animation duration should be 7 seconds
It fades in over 2 secs, stays for 3 seconds and then fades out over 2 seconds
#keyframes fadein {
0% { opacity: 0; }
29% { opacity: 1; }
72% {opacity:1;}
100% {opacity:0;}
}
JSfiddle Demo (Chrome)
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.