I have an HTML Element with a CSS Animation applied to it that I want to snap to a different style after the animation finishes
.animatingElement {
-webkit-animation: myAnimation 0.25s ease-in-out forwards;
}
#-webkit-keyframes myAnimation {
from {
state1
}
to {
state2
}
}
.animatingElementFinal {
/*desired final/3rd state*/
}
Is there any way to, after the animation completes, have it apply a different style than the final state of the animation?
Thanks for any suggestions!
Related
My css:
.App-logo {
animation: rotating infinite 10s linear;
height: 40vmin;
}
.App-logo:hover {
animation-timing-function: ease-out;
animation-iteration-count: 100;
animation-delay: 2s;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It should slow down on hover and get speed without hovering but what it does a little off i wanted it to do
I think the problem that i don't actually know how to save a state of the keyframe and apply it to another animation to ease out and then in, but this just an assumption.
You aren't able to save keyframe states using only CSS to transition between them, unfortunately. If you want to transition between them, you'd need to use something like Javascript to track states and manipulate data at any point in time.
I want to hide and show a div using css like :
Show => Hide => Show =>...
for do that I've tried that code:
#showMe {
animation: cssAnimation 0s 2s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible;
}
}
but it will hide it only plz guys help!!
One way to do this is by adding keyframes for a specific progress (time-progress).
Some attributes in CSS are not animateable, so if you try to animate them they get instantly set to your "to" value, which is visible. To work around this, we simply set the visibility to hidden(in css) and keep it until 50% (in animation). At 51% we set it to visible, where it gets instantly shown (until the end).
To make it "blinking" you can repeat this animation by appending infinite which is a shorthand for animation-iteration-count: infinite.
#showMe {
animation: cssAnimation 1s infinite;
visibility: hidden;
}
#keyframes cssAnimation {
50% {
visibility: hidden;
}
51% {
visibility: visible;
}
}
<div id="showMe">(╯°□°)╯︵ ┻━┻</div>
Try to add property animation-iteration-count and set value it to infinite. It should play the animation infinite times.
Fiddle here: https://jsfiddle.net/gkzqLfxa/1/
I'm trying to chain CSS animations such that I can write generic animations that don't need to have prior knowledge of the values that happened before them.
For example:
MyDiv has an animation that animates its opacity from 0 to SomeValue. Then a second animation fades out, from SomeValue to 0. Currently, I have to write an animation to fade in to 0.5, then another animation that fades out from 0.5 to 0.
I attempted to do this by not putting in the opacity property in the 0% keyframe, like so:
#keyframes fadeinhalf
{
0% { opacity: 0; }
100% { opacity: 0.5; }
}
#keyframes fadeinfull
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadeout
{
0% {
}
100%{
opacity: 0;
}
}
However, when I run this, with fadeinhalf first, then fadeout second, there is a hitch at the 0% keyframe of fadeout where it goes back to opacity: 1;.
I would rather have something where I can write that first animation custom, but the fade out animation could be generic, and fade out from any opacity to 0. Is this possible?
-webkit-animation-fill-mode: forwards;
will retain the state of the final keyframe, though I've not used it for this exact application…
EDIT: possible alternative solution
You may need to use the jQuery Keyframes library (http://keyframes.github.io/jQuery.Keyframes/)
and do something like:
var supportedFlag = $.keyframe.isSupported();
var setOpacity = 0.5;
function setKeyFrame(data) {
var setOpacity = data;
$.keyframe.define([{
name: 'magic',
'0%': {'opacity': 0},
'100%': {'opacity': setOpacity}
}]);
};
$(document).ready(function() {
setKeyFrame(1);
$('#target-element').playKeyframe(
'magic 1s linear 0s infinite normal forwards',
complete
);
});
I want to do this effect (jsFiddle, when hover on button):
This is a part of the code i need i guess, what i want is:
every two seconds on a div with this button as the background-image:
i want the shining effect like in the fiddle, that will swoop in and out fast, after two seconds, another swoop, etc...
is it possible with css only?
if no, with javascript, what should be the case for me to do it?
Should i do an interval of:
setInterval(function(){
document.getElementById('btnDiv').classList.add('shining');
setTimeout(function(){
document.getElementById('btnDiv').classList.remove('shining');
,1000)
,2000)
I know it's a bit overkill for this kind of effects, isn't it?
Since you already have the effect you want on :hover, just convert it to an animation.
#element {
animation: pulse 1s linear infinite alternate;
}
#keyframes pulse {
from {
/* define initial state of animation here */
}
to {
/* define final state of animation here */
}
}
Using linear infinite alternate will make the pulse go back and forth between the two states. Depending on the effect you want to achieve, you may have better results by using something like 40% and 60% instead of from and to respectively, to add a bit of delay around the pulse.
#nodelay, #delay {
width: 100px;
height: 100px;
background-color: #080;
border-radius: 50px;
}
#nodelay {
animation: pulse 2s linear infinite alternate;
}
#delay {
animation: pulse-delay 2s linear infinite alternate;
}
#keyframes pulse {
from {background-color: #080}
to {background-color: #0f0}
}
#keyframes pulse-delay {
from, 40% {background-color: #080}
60%, to {background-color: #0f0}
}
<div id="nodelay"></div>
<div id="delay"></div>
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.