I've got an HTML element here with this starting style:
transition: transform 2s;
First, it is animated (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a transform3d that should move the element vertically and this should take 2 seconds as per the rule above.
The transform3d doesn't take effect unless I add this rule to the element: animation: none as well. I am confused on what animation: none actually does. Are there complications with transforming an element that has had an animation applied to it?
animation: none sets all animate-* properties to their initial value:
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
The problem is that your element has an animation which affects its transform property. Therefore, when you modify its static transform, you don't see the change because it's overridden by the animation.
Then, if you remove the animation, you see the change in transform.
This is unrelated to transforms, it would happen with any property, like color:
div {
animation: color-anim 1s infinite;
}
#keyframes color-anim {
from { color: red }
to { color: blue }
}
<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>
Related
I'm seeing if there is a way to blur out your background for a few seconds then have it come into view. I was trying to play around with the blur attribute and the transition attribute but I was not getting the results I was getting. I tried something like this on my css
body{
background:black;
-webkit-filter: blur(10px);
}
.body{
margin:0 auto;
width:95%;`enter code here`
clear:both;
transition:body 2s ease-in-out;
}
Any suggestions?
Presumably you don't have a class named "body" so the period in your second selector is an error. Also, you have the syntax wrong for transition. The first value is the property to transition, not a selector. And, depending on the level of support you require, you need vendor prefixes on both the transition property and the property being transitioned, e.g.
body {
-webkit-transition: -webkit-filter 2s ease-in-out;
}
BTW, I'm not sure if -filter is an animatable property.
Fiddle: http://jsfiddle.net/Bushwazi/sHL9m/3/
1) Use all in the transition
2) Despite what the prefixes lead you to believe, this didn't work in all browsers
3) But it did work the same for backgrounds and img
I change a class using javascript, css handles the rest.
.filter {
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-o-filter:blur(10px);
-ms-filter:blur(10px);
-webkit-transition: all 5.0s linear 1.0s;
-moz-transition: all 5.0s linear 1.0s;
-ms-transition: all 5.0s linear 1.0s;
-o-transition: all 5.0s linear 1.0s;
transition: all 5.0s linear 1.0s;
}
.filter.animae {
filter:blur(0px);
-webkit-filter:blur(0px);
-moz-filter:blur(0px);
-o-filter:blur(0px);
-ms-filter:blur(0px);
}
.bg {
display:inline-block;
width:360px;
height:424px;
background:url(http://gruntjs.com/img/grunt-logo.svg);
}
I'm trying to animate (fade-in) 3 buttons. This is my html:
<aside>
<p><i class="icon-facebook"></i> Share</p>
<p><i class="icon-twitter"></i> Tweet</p>
<p><i class="icon-envelope"></i> Mail</p>
</aside>
and this is my css (the class .aside-check gets applied by javascript)
.aside-check {
animation: fadein 2s;
}
#keyframes fadein {
from {opacity:0;}
to {opacity:1;}
}
What I would like now, is to give every paragraph a little delay, I tried
p:nth-child(1) {animation-delay:2s}
p:nth-child(2) {animation-delay:3s}
p:nth-child(3) {animation-delay:4s}
but that doesn't work. Unfortunately I don't know what I did wrong...:/
Well, first you need to apply the animation to the paragraphs not the aside. Always remember, animations don't inherit. Second, don't forget your webkit prefixes! It's a pain but webkit browsers still require -webkit- before all animation properties and keyframe definitions. Without it your animation won't work on, Chrome, Safari, Android, etc. (If you can't remember if you need prefixes take a look at caniuse.com http://caniuse.com/#feat=css-animation)
Also note that if you want the paragraphs to be hidden then revealed you will want to define them with an opacity of 0 and then set the 'animation-fill-mode' to forwards so that the properties in the 'to' frame stick after the animation finishes.
I made a little JS fiddle with a working example, hope it helps!
http://jsfiddle.net/Ashwell/HqBZU/
Here are the important bits:
The animations applied to the paragraphs with the fill-mode set and starting opacity.
.aside-check > p{
animation: fadein 2s;
-webkit-animation: fadein 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
You'll also need the webkit key frames
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And don't forget to add -webkit-animation-delay: 2s; to each of the nth-child selectors with the respected delay time!
I hope this answer isn't coming too late!
I came across a puzzling issue, where the computed style of an attribute has a different value than the element's style.
A few words first to describe my situation
I am animating the background-color property of an element and when the animation ends,
I retrieve the computed bgcolor value and apply it to the element's style. This works fine
However, if I try now to alter the bgcolor nothing happens, although the value is indeed set on the element, as the developer tools report.
At this point if you toggle (through the browser's developer tools) between style and computed style, there is a discrepancy between what the 2 report, with the computed style taking precedence of course.
I have created a test script on fiddle that depicts the situation
http://jsfiddle.net/d2S3d/14/
Attaching also some sample css cause stackoverflow does not let me to submit the post without it
.animate{
animation-name: bg_kf;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: normal;
-webkit-animation-name: bg_kf;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-direction: normal;
-moz-animation-name: bg_kf;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: forwards;
-moz-animation-direction: normal;
-o-animation-name: bg_kf;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 0s;
-o-animation-iteration-count: 1;
-o-animation-fill-mode: forwards;
-o-animation-direction: normal;
}
#keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-moz-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:red}
}
#-webkit-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
#-o-keyframes bg_kf {
from {background-color:#FFFFFF}
to {background-color:rgba(255, 140, 74, 0.16)}
}
Any help appreciated
regards
The problem here is that the animation properties you have defined in .animate keep the background color red, regardless of what the actual inline style rule specifies. This is why toggling the inline style doesn't seem to have any effect.
If you were to remove the .animate class right after you apply the inline style, everything will once again be back to normal:
$("#sample").bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(){
var computedBg = $(this).css('background-color');
$(this).css('background-color', computedBg);
$(this).removeClass('animate');
});
Here is a demonstration (try clicking the button after the animation has completed): http://jsfiddle.net/vcfDj/
You've set animation-fill-mode "forwards". The effect of that is to hold the animated CSS properties at the values they were when the animation ended (regardless of other style settings). Setting it to "none" will fix your problem!
I'm trying to
PLAY animation on hover.
PAUSE animation on hover out (i.e don't go back to frame 0).
Is it not possible to use -webkit-animation-play-state: paused; on a parent div?
See an example here, when you hover out it goes back to frame 0.
I don't want to use JS.
example jsfiddle
set the animation on #tech with play state paused
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
then change play-state to running on hover
#tech:hover{
-webkit-animation-play-state:running;
}
I was looking for this as well, and #MikeM's answer got me where I needed to go, and with #HellGate's comment on that answer concerning Chrome:
you need the pause state after the animation else it does not work
I was interested in how to pause animation on a PNG sprite sheet when it was inactive, and continue/resume on hover, so the accepted answer helped in that regard.
Here is a demo showing how this can be done on a PNG Sprite Sheet (credits to the sprite, and original CSS go to Guil Hernandez and his awesome blog post here): CodePen.
The important CSS parts:
.monster {
width: 190px;
height: 240px;
margin: 2% auto;
background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center;
-webkit-animation: monsterAnimation .8s steps(10) infinite;
animation: monsterAnimation .8s steps(10) infinite;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.monster:hover {
-webkit-animation-play-state: running;
animation-play-state: running;
}
#keyframes monsterAnimation {
100% { background-position: -1900px; }
}
Check the JSFiddle here: http://jsfiddle.net/fRzwS/373/.
The animation doesn't stop because the late definition of animation overwrites the value of property animation-play-state. According to the W3C specification, animation:
The 'animation' shorthand property is a comma-separated list of
animation definitions, each of which combines seven of
the animation properties into a single component value.
And the seven properties are:
<single-animation> = <single-animation-name> || <time>
|| <single-animation-timing-function>
|| <time> || <single-animation-iteration-count> || <single-animation-direction>
|| <single-animation-fill-mode> || <single-animation-play-state>
It is similar to the properties background and background-color.
So in the original code:
#tech {
-webkit-animation-play-state: paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
Property animation-play-state is set to be paused. However, the late property animation OVERWRITES this value by its default value running. So, you can either define the property animation-play-state later (http://jsfiddle.net/fRzwS/373/):
#tech {
-webkit-animation: moveSlideshow 10s linear infinite;
-webkit-animation-play-state:paused;
}
Or you can simply use (http://jsfiddle.net/fRzwS/374/):
-webkit-animation: moveSlideshow 10s linear infinite paused;
Here is another example which works on both Chrome and Firefox: http://jsfiddle.net/MaY5A/694/
I don't have enough reputation to comment other answers. Well. #MikeM 's way works but he did a little mistake. Look:
#tech {
-webkit-animation-play-state:paused;
-webkit-animation: moveSlideshow 10s linear infinite;
}
This doesn't work and this shouldn't work. Animation shorthand note overrides animation-play-state. You need reorder these strings to get it working
I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up:
#keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
And to make it even more awesome I added a hover animation:
#keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
But there comes the problem! I assigned the animations like this:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Everything works just fine: The <a> splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a> the smooth stuff ends abruptly and the <a> repeats the splash-animation. (Which is logical to me, but I don't want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?
After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute.
There sadly is no way to save a certain attribute states across element states.
You'll have to use JavaScript.
If I understand correctly that you want to play the animation on A only once you have to add
animation-iteration-count: 1
to the style for the a.
It can be done with a little bit of extra overhead.
Simply wrap your link in a div, and separate the animation.
the html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
.. and the css ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.
.animateOnce {
-webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-o-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
Just use
animation: hover 1s ease-in-out forwards;
An easy solution to solve this problem is by just adding more seconds to the animation in a:hover and taking advantage of the transitions in #keyframes
a:hover {
animation: hover 200s infinite alternate ease-in-out;
}
Just make the progression of #keyframes go faster by using percentages.
#keyframes hover {
0% {
transform: scale(1, 1);
}
1% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1.1, 1.1);
}
}
200 seconds or 300 seconds in the animation is more than enough to make sure the animation doesn't restart. A normal person won't last more than a few seconds hovering an image.
Impossible in CSS only, you need a javascript workaround. As already explained by some here, the animation-iteration-count property is reset on a :hover. The best is to do everything in javascript, but for reasons of ease of customization of the code you may want to keep the possibility of doing something in CSS.
So, in JS :
// adding a class to the html tag, during the animation time
const startPage = (() => {
const html = document.documentElement,
s = 'start'
html.classList.add(s)
window.addEventListener('load', function() {
setTimeout(() => {
html.classList.remove(s)
}, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
})
})()
And for the CSS:
/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
animation: animDrop 1s ease;
}
The following code without "iteration-count: 1" was resulting in all line items pulsing after entering, until the last item loaded, even though 'pulse was not being used.
<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>
<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>
<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>
<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>
<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
So i just found a solution for that:
In the hover animation do this:
animation: hover 1s infinite alternate ease-in-out,splash 1;