Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a img in html
I want to show 3 different img in a 4 second time lapse in css code.
PD:i found this example, but i don't understant it.
http://css3.bradshawenterprises.com/cfimg/#cfimg3
Here it is, using CSS only.
HTML:
<div id="img></div>
CSS:
#img {
width:600px;
height:400px;
border:1px solid #000;
-webkit-animation:changeBG 12s ease infinite;
-ms-animation:changeBG 12s ease infinite;
-moz-animation:changeBG 12s ease infinite;
-o-animation:changeBG 12s ease infinite;
}
#-webkit-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-moz-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-ms-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
#-o-keyframes changeBG {
0% { background:url('http://dummyimage.com/600x400/f20808/fff'); }
50% { background:url('http://dummyimage.com/600x400/ffffff/000'); }
100% { background:url('http://dummyimage.com/600x400/000000/fff'); }
}
And here is a FIDDLE
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
I would like to make an animation for a popup that would slide to the left at the beginning and then disappear with the opacity after 8 seconds but I can't find how to do it.
What I have for now is
#keyframes popup-anim {
0% {
right: -100%;
opacity: 1;
}
50% {
right: 32px;
}
100% {
opacity: 0;
}
}
first your popup container should be relative then only you can make animation with respect to container
its difficult to guess on what html you are trying to fit the animation but however this should work for you
#keyframes popup-anim {
0% {
left: 0;
}
16% {
left:-32px;
opacity: 1;
}
100% {
opacity: 0;
}
}
.popup-container{
position: relative;
animation: popup-anim 8s forwards;
}
This code works in current chrome and internet explorer, but not in current firefox (UPDATED Code with unnecessary -moz prefix):
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
The element does not appear at all.
Alas, none of the other identically entitled questions help in this case...
ADDITION / HINT
Maybe my problem lies not within the code above, but in the question
how is the CSS animation fired?
The element in question is simply turned on with ...style.display='inline'. For Chrome and IE, that seems to be ok. But is it not ok for firefox?
You forgot to add rule for firefox. checkout following code
#-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
#keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
That's because you are missing the definition for Mozilla Broswer keyframes.
#-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
and the moz-animation
.sh-tada {
-moz-animation:sh-tada 2s linear 1;
}
Add these to your css and it should work.
Is it possible to change the background color of <p> element after few seconds ( 10 to 20 seconds ) using css fiddle? I don't want to use js.
<p style="background:#E1FEE0;">Human</p>
Using a CSS animation, you could just jump from 99.9% to 100%. Just set the initial background color (#E1FEE0) within 99.9%, then the final background color within 100%. If you want the color to transition, just increase the gap and use something like 80% for example.
Example Here
p {
display: inline;
animation: background-fade 10s forwards;
}
#keyframes background-fade {
99.9% {
background:#E1FEE0;
}
100% {
background:#000;
}
}
Other vendor prefixes omitted for simplicity and brevity.
Actually You can.
You should use CSS animation to achieve this.
Here's example of CSS declaration:
#-webkit-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-moz-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#-o-keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
#keyframes change-color {
0% { background-color: red; }
100% { background-color: green; }
}
.animated {
-webkit-animation: change-color 2s infinite; /* Safari 4+ */
-moz-animation: change-color 2s infinite; /* Fx 5+ */
-o-animation: change-color 2s infinite; /* Opera 12+ */
animation: change-color 2s infinite; /* IE 10+ */
}
Try this on JSFiddle.
For more reading, here's the link about CSS animations.
we have this h1 here
<h1 class="in">hello</h1>
and css for this is
.in{
-webkit-animation:mymove1 3s 1;
}
.in:hover {
-webkit-animation:nextT 3s 1;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes "mymove1"
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
#-webkit-keyframes "nextT"
{
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.2);
}
}
so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
jsFiddle
Heres the code if you want it to change opacity on pageload & resize when you hover without the 'mymove1' animation restarting.
<style>
.in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
}
.in:hover {
transform:scale(1.2);
}
#keyframes mymove1
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
</style>
I have implemented animation pausing as described here:
How to pause and resume CSS3 animation using JavaScript?
Here is my CSS for the rotating element:
.is-rotating{
-webkit-animation: circle 55s linear infinite;
-moz-animation: circle 55s linear infinite;
-ms-animation: circle 55s linear infinite;
animation: circle 55s linear infinite;
}
I toggle a is-paused class to the elements in question onmouseover:
.is-paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
When I remove this class with JS (onmouseout), the rotating animation resets to the 'origin' point. Sometimes it does, sometimes not. This happens in webkit (Chrome and Safari on OSX), works fine in FF.
I know animation-play-state is an experimental feature, but MDN says it should work fine in webkit. Does anyone have any ideas on how to implement for webkit browsers?
UPDATE: here is the rest of the CSS:
#-webkit-keyframes circle {
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(360deg); }
}
#-webkit-keyframes inner-circle {
from { -webkit-transform:rotate(0deg); }
to { -webkit-transform:rotate(-360deg); }
}
#-moz-keyframes circle {
from { -moz-transform:rotate(0deg); }
to { -moz-transform:rotate(360deg); }
}
#-moz-keyframes inner-circle {
from { -moz-transform:rotate(0deg); }
to { -moz-transform:rotate(-360deg); }
}
#-ms-keyframes circle {
from { -ms-transform:rotate(0deg); }
to { -ms-transform:rotate(360deg); }
}
#-ms-keyframes inner-circle {
from { -ms-transform:rotate(0deg); }
to { -ms-transform:rotate(-360deg); }
}
#keyframes circle {
from { transform:rotate(0deg); }
to { transform:rotate(360deg); }
}
#keyframes inner-circle {
from { transform:rotate(0deg); }
to { transform:rotate(-360deg); }
}
Have you tried animation-fill-mode: forwards? That specifies that at the end of the animation, it should maintain its final styles instead of reverting to its pre-animation state.
I've experienced similar issues with a CSS animation in Webkit browsers as well. The issue, in my situation, was that I was using the css transform property, like so:
#keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(20px); }
100% { transform: translateY(0px); }
}
This caused glitching/jumping when pausing/playing the animation with the animation-play-state property. Replacing transform with top fixed this jumping issue in webkit browsers.
#keyframes float {
0% { top: 0px; }
50% { top: 20px; }
100% { top: 0px; }
}
I had the same flavor of jumpiness using CSS to animate a 3D carousel product catalog
In two directions based on :hover.
Having fiddled with obvious ideas like animation-fill-mode:forwards and such
with not the least good fortunes what finally solved it was to mix in two bits of transition syntax with a tiny duration and the transform itself as the property. In the course of transition chasing to catch transform's state ,it's updates
To the element being transformed remained intact , and the effect seems to fit the specs , so it should be a valid solution
transition-duration: 0.2s;transition-property:transform;