I got a bug on using animation-timing-function in safari after updated to iOS 14.
Before iOS 14, animation-timing-function is used to control the speed of the properties (likes top, left, opacity). But now it seems to control the timing. Below is the example :
.div{
animation: my-ani 10s ease-out;
}
#keyframes my-ani {
0%, 30% {
left:0px
}
100% {
left:100px
}
}
In the past (browsers except for safari in iOS 14), the animation starts at 3s and moving to 100px with the speed of ease-out in 7 seconds. But in safari 14, it will start before 3s (I don't know the exact time) with a linear speed in more than 7 seconds. Does anyone know what is the reason for this issue? Thanks.
Related
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% .
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% .
I'm a "new" web designer, and I'm learning yet !
CSS is little hard to me... Please, somebody help me !! :)
I need to do a 4 image transition with fade, in loop, in a sequence from 1 to 2, than 3 and 4, returning to 1.
I already tryed 2 tutorials from here. But when I change the settings to fit to mine, doesn't Work.
My result is this :
http://www.mafeluvizotto.com.br/crossfading/
After the first sequence, the animation became weard...
The images are here :
...crossfading/1.jpg
(2.jpg, 3.jpg and 4.jpg)
Please, somebody could help me, to solve this ?
Thanks very much !!
The idea behind this is that you need to know the amounts involved. You have to calculate the timing of the animation vs. how many "slides" vs. how long you want them to be displayed for.
In the case of my example, it's 4 slides, 6 seconds each. That helps me calculate the timing of the animation and how long to delay the animation.
The animation timing is determined the 100% of the keyframes divded by the total # of slides, which in this case is 4. That determines that 25% (100/4) is when to fade out -
#-webkit-keyframes fade {
0%{
opacity: 1;
}
15% {
opacity:1;
}
25%{
opacity: 0;
}
90% {
opacity:0;
}
100% {
opacity:1;
}
}
The percentage before the fade-out and fade-in in this case is 10%. 25-10 = 15, and 100 - 10 = 90. That determines the fading time for each slide.
Then, the duration of the animation is determined by slides x display time. 4 slides multiplied by 6 seconds each gives us 24 seconds of duration.
The delay between each is that time minus each slide, or 6 seconds, which results in:
.slide:nth-child(1) {
-webkit-animation: fade 24s 18s infinite;
z-index:10;
}
.slide:nth-child(2) {
-webkit-animation: fade 24s 12s infinite;
z-index:10;
}
.slide:nth-child(3) {
-webkit-animation: fade 24s 6s infinite;
z-index:10;
}
.slide:nth-child(4) {
-webkit-animation: fade 24s 0s infinite;
z-index:10;
}
Here is a demo - http://jsfiddle.net/5zx43/1/
To keep the order of the HTML the same order of the slide-show, z-index will have to be utilized and the delay order of the animations in relation to :nth-child() will need to be reversed.
Here is a demo of "correct" order - http://jsfiddle.net/5zx43/2/
This has a great tutorial on it - http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
Of course, keep in mind that keyframe and animation prefixes may need to be different for other browsers.
I have the following css3 rules
#sun, #sun div {
position:absolute;
border-radius:1000px;
-webkit-border-radius:1000px;
-moz-border-radius:1000px;
-ms-border-radius:1000px;
-o-border-radius:1000px;
animation:sunrise 3.2s ease 0 infinite alternate;
-webkit-animation:sunrise 3.2s ease 0 infinite alternate;
-moz-animation:sunrise 3.2s ease 0 infinite alternate;
-ms-animation:sunrise 3.2s ease 0 infinite alternate;
-o-animation:sunrise 3.2s ease 0 infinite alternate;
}
#-moz-keyframes sunrise {
0% {background:rgba(255,255,204,.23);}
75% { background:rgba(255,255,204,0.5); }
100% { background:''; }
}
However, the Firefox implementation doesn't seem to work.
The background colors are all set in rgba format
but each #sun div has a different color.
What could be the problem?
The code you've posted is very much incomplete, but there are quite a few things that aren't ok.
You should always write the unprefixed versions last, never before
the prefixed ones.
-ms-border-radius and -o-border-radius never existed! And unless you
need to support FF3.6, -moz-border-radius is useless. -webkit-border-radius is pretty much useless these days too - see http://caniuse.com/#feat=border-radius
Firefox 16+ (current version is 19) supports unprefixed keyframe animations! See http://caniuse.com/css-animation
0s, not 0! Plus the default value for the delay happens to be 0s anyway so you can omit it and just write animation: sunrise 3.2s infinite alternate; (the same way you can omit ease, which is the initial value for the timing function)
background: rgba(255,255,204,0), not background: ''!
And a question: why use such a huge border-radius? My laptop screen is much smaller than anything that would require such a huge border-radius. If you just to make a disc, give your element equal width and height and set border-radius: 50%.
Can Safari 6.0.2 perform a rotation of more than 360 degrees? I have a simple experiment. Try it in Chrome release(not canary, will break, moz also will break) and Safari.
UPDATE:Since I found the solution, I have edited make it work properly in Chrome and Safari, but I still providing a improper version and proper version for compare.(note: Safari version is 6.0.2 at this time). BTW, I test in MAC only, not yet test in Windows
Improper version : Fail in Safari
Proper version : Simple Experiment
You cannot have multiple transform style at the same time when transitting , example
.chun {
-webkit-transform: scale(1.0); /*we want rotate, so remove this*/
transform: scale(1.0); /*we want rotate, so remove this*/
-webkit-transition: all .8s ease;
transition: all .8s ease;
}
.chun:hover {
-webkit-transform: rotate(-900deg); /*we want this to be rotate few cycle*/
transform: rotate(-900deg);
}
cannot have scale on normal state and rotate for hovering state.
This definetely is a bug(or something else) in safari, because Chrome can handle it properly.