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 have a CSS3 animation I'm working on for my website in which the stroke-dashoffset of an SVG is animated. It works fine on Chrome and Opera but doesn't work on Safari or Firefox. On Safari, the text shows up but does not animate. On Firefox, the text doesn't show up at all. It's most important to me to get Safari working so that it shows up correctly on iOS.
I've tried a bunch of stuff already including changing the units, using percentage keyframes rather than to and from, adding and removing prefixes, not using shorthand for the animation properties, changing various properties, trying different webkit prefixes, double checking that I'm not animating stroke-dashoffset using negative numbers, etc and nothing has worked so far. I've looked at every article I could find online and haven't found a solution. I'm hoping it's something simple that I'm overlooking or that there is an easy workaround but I fear that it's a webkit bug.
I've put a JSfiddle below that replicates the issue in Safari and Firefox and works correctly in Chrome:
https://jsfiddle.net/lystroid/2a97ntf1/58/
Here's is the relevant HTML and CSS:
HTML
<svg width="80vw" height="150vw">
<text y = "500px" fill="none" stroke="#e2e2e2" stroke-width="0.5">ABCDE</text>
</svg>
CSS
text {
font-family:arial;
text-align: center;
color: #e2e2e2;
font-size: 23vw;
line-height: 0;
stroke-dasharray: 98vw;
stroke-dashoffset: 98vw;
animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-moz-animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-o-animation: draw 7s ease 1 forwards;
-ms-animation: draw 7s ease 1 forwards;
}
#-webkit-keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
#keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
I haven't tested the animation in Internet Explorer or Edge.
Thanks for reading!
EDIT: I should clarify that there are two animations on the page. One of them is for the caption, which works well on all browsers. The animation that I'm referring to in this question is the animation on the SVG text that says 'ABCDE'
I am making a site that uses some CSS3 keyframes animations.
The guides I have seen suggest using separate code for each browser specifying which code is for what browser as I go along.
eg. This guide which suggests:
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}
And this one Which suggests slightly different grouping but essentially the same thing.
However I have seen many articles saying that browser detection is poor practice in modern webpages.
This page (same site as above)
W3C agrees but feels an exception could be made for browser prefixes in css.
Is it possible to use keyframes using an approach that just queries the support of the feature rather than specify a browser?
However I have seen many articles saying that browser detection is poor practice in modern webpages.
Yes, browser detection is not good practice as it is unreliable and likely to break in the (near) future.
However, what you are doing here is not "browser detection" as described in that article. You are using vender prefixes.
Vender prefixes are OK, the accepted way of doing this (implementing a feature that is still considered "draft"). It is the only way of doing this.
"The problem" is that browsers don't necessarily support the "standard" way of doing this yet, ie. without the vendor prefix. Probably because they implemented this before it was a standard; before the "final" implementation has been agreed. In the meantime they implement how they think it will work and use a vendor prefix. The vendor prefix'd rule might not work the same way as the final "standard".
So, the vendor prefix'd version will always (or for a while yet) work in the browser it is designed for. The browser ignores all other vendor prefixed rules (in CSS, if a browser does not understand something it should ignore it). When the browser does implement the standard and starts to support the non-vendor-prefixed rule then that is the rule that will take priority.
I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
hey guys i have a difficulty adding animations dynamically , I am basically just a HTML/CSS guy , who avoids JS but uses Jquery occasionally , I know how to write jquery code though . so baically my difficulty is that i have thos bootstrap carasoul fiddle here :
now i have created a CSS-3 animation for the images in the carasoul The animation code is below :
#keyframes scalebg {
0%{
-ms-transform:scale(1);
-o-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
}
.scalebg {
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-animation-name: scalebg;
-o-animation-name: scalebg;
animation-name: scalebg;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
The issue i am having ::
now what i would really like to do is when each slide appears i would immediately like the class scalebg to be appeared to the <img> tag in that particulate slide , the problem is how do i detect which perticular slide has slided in and how do i add the class scalebg only to that perticular slide ?? Thats the challenge that i am facing ..
the bootrap documentation does say that the bootstrap carasoul exposes 2 events :
slide.bs.carousel :: This event fires immediately when the slide
instance method is invoked.
slid.bs.carousel :: This event is fired when the carousel has
completed its slide transition.
but i am not sure how i can use these events to accomplish what i want . can somebody please guide me .
P.S. ::
as of now the effect works because i have added the following code to the animation :
animation-iteration-count: infinite;
but thats not how i would like the animation to be .
Thank you.
Alex-z.
You can use e.relatedTarget for the element to be active.
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('.item').find('img').removeClass('scalebg');
$(e.relatedTarget).find('img').addClass('scalebg');
})
Fiddle Demo