I happened to post a question on linear animation that outlook.com presents and some of our friends here told me that its not possible. I was able to achieve that with CSS3 keyframes. However, it seems to work only in IE10 and not in Firefox and Chrome. I have put alternate tags for firefox and chrome from w3schools still I am not sure why its not working. Here is the link from jsfiddle which contains my code. I am also putting github link just in case. Please help me in this regard.
JSFiddle
Github
Part of my code is as follows. This code is repeated for each .(dot) with slight change in timings. There are 5 dots like this.
.linearAnimate1
{
animation-delay: 0s;
-moz-animation-delay:0s; /* Firefox */
-webkit-animation-delay:0s; /* Safari and Chrome */
animation-duration: 10s;
-moz-animation-duration:10s; /* Firefox */
-webkit-animation-duration:10s; /* Safari and Chrome */
animation-iteration-count: infinite;
-moz-animation-iteration-count:infinite; /* Firefox */
-webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
animation-name: makedotspin1;
-moz-animation-name: makedotspin1;
-webkit-animation-name: makedotspin1;
}
#keyframes makedotspin1 {
from {
animation-timing-function: ease;
-moz-animation-timing-function:ease; /* Firefox */
-webkit-animation-timing-function:ease; /* Safari and Chrome */
transform: translateX(0px);
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
visibility:visible;
}
25% {
animation-timing-function: ease-in;
-moz-animation-timing-function:ease-in; /* Firefox */
-webkit-animation-timing-function:ease-in; /* Safari and Chrome */
transform: translateX(450px);
-moz-transform: translateX(450px);
-webkit-transform: translateX(450px);
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
50% {
animation-timing-function: ease-inout;
transform: translateX(900px);
-moz-transform: translateX(900px);
-webkit-transform: translateX(900px);
visibility:hidden;
animation-delay: 10s;
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
to
{
}
}
Animated buttons metro style progress bar (to show it can't only be done using a gif
I believe you need to have a prefix for #keyframes for the different layout engines, in example:
#-webkit-keyframes {}
#-moz-keyframes
etc, IE10 works because it supports the official spec
Finally I have found out the issue. Since I have used an unordered list I have used the following CSS
ul li
{
display: inline;
font-size:4em;
visibility:hidden;
}
However, Mozilla and chrome are unable to do animation because the display is inline and all the list items are on top of each other. To fix the issue I had to do two things 1) I had to add -moz- and -webkit- prefixes for keyframes 2) Change the display to be inline-block as follows and it fixed the issue. Now the animation works on Mozilla, IE and Chrome
ul li
{
display: inline-block;
font-size:4em;
visibility:hidden;
}
Related
I am trying to capture a specific moment in elements animation. Meaning - I want the animation to start and stop at point X (lets say start and stop on second 5 of 100s animation).
Here is my shot at it
JSFiddle
#-webkit-keyframes background {
from { background: yellow; }
100% {
background: blue;
}
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: -40s;
-webkit-animation-play-state: paused;
}
This seems to work great in Chrome and Firefox but doesnt seem to work in Safari and IE(no way, right?!)
Note: I left the prefix in on purpose to test it on Safari specifically.
Unlike in Chrome, it seems like the animation never starts in Safari and remains on the initial step.
Is this a known issue? Is there a workaround or another way to implement this?
UPDATE/CLARIFICATION
What i need is to be able to capture a specific FRAME of the animation. Open my fiddle in Chrome and play around animation-delay attribute in my fiddle (make sure it remains negative). What you will see is that you are able to catch 1 specific frame of the animation. Thats exactly what I need. My problem is that this doesnt work in Safari.
What about creating a keyframe animation of 5 seconds and make sure there is ' 100ms in percentage' where the frames are the same.
Since the animation scale for time is in percentages, we can calculate that 100ms/5000ms is equal to 2%/100%.
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
98% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
for the purpose of demonstration, the jsfiddle has a longer pause, 500ms.
https://jsfiddle.net/bfu9wvxt/5/
If you want your animation to stop and start at a specific point, you need more keyframes:
#-webkit-keyframes background {
0% { background: yellow; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
/* When You Want */% { background: /* A different color in-between yellow and blue! */; }
100% { background: blue; }
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: ease;
}
Replace the first /* When You Want */% with a percentage of the animation duration where you want it to stop.
Replace the second /* When You Want */% with a percentage of the animation duration where you want it to start again.
Replace both occurrences of /* A different color in-between yellow and blue! */ with the same color, a color between yellow and blue.
This should work in Safari: Fiddle
#-webkit-keyframes change {
0% { background-color: yellow; }
100% { background-color: blue; }
}
div {
-webkit-animation-name: change;
-webkit-animation-delay: 0s;
-webkit-animation-duration: 5s;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
}
Playing with the cubic-bezier curve can replicate the animation of stopping then starting at 5s out of 100s but it'll be pretty hard to start and stop the animation without javascript.
Try this code:
Is compatible with all the browsers especially safari.
div {
width: 100%;
background-color: #fff;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 5s;
animation-delay: 5s;
-webkit-animation-iteration-count: 100;
/* Chrome, Safari, Opera */
animation-iteration-count: 100;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
/* Standard syntax */
#keyframes example {
25% {
background-color: blue;
}
50% {
background-color:yellow ;
}
25% {
background-color: yellow;
}
50% {
background-color: blue;
}
}
<div>Color bar</div>
If you want it not 100 times, You can take it out and add 100s to
duration, because I'm not sure what you want
let me know if you have any question.
#-webkit-keyframes scaleIn {
from {-webkit-transform: scale(0);}
to {-webkit-transform: scale(1);}
}
.animate-log-in {
animation-name: scaleIn;
animation-duration: 0.5s;
}
It's working on the latest version of Chrome (Mac OSX) but not in the latest version of Safari and an older version (I think) of Chrome. Is there anything I need to add?
I noticed another Safari issue when animating scale.
Seems Safari doesn't respects your scale if the element has display: inline (e.g. is a span). Make it block or inline-block.
This isn't animation-specific. It also goes for changing the scale with no animation.
This was with Safari 9. Also with the Mobile Safari of iOS 9.
Chrome does not have this issue. It will happily change the scale of an inline element.
JSFiddle to see it in action: https://jsfiddle.net/ca64gkma/5/
Add the below code and try.
.animate-log-in {
-webkit-animation: scaleIn;
-webkit-animation-duration: 0.5s;
animation: scaleIn;
animation-duration: 0.5s;
}
#-webkit-keyframes scaleIn {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
#keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
instead of scale try zoom, for webkits values ranging from 100% as scale 1 , 1.5 = 150% and so on
I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.
MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/
CSS
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
100% {
-webkit-transform: translateX(0%);
}
}
HTML
<div class="slideRight">
HI
</div>
Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:
<a class="slideRight">
HI
</a>
Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
}
It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.
All major browsers currently support animation-delay without the need for vendor prefixes.
As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:
.slideRight{
animation-name: slideRight;
animation-duration: 1s;
animation-timing-function: ease-in-out;
visibility: visible !important;
/* New code here: */
animation-delay: 1s;
display: inline-block;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
100% {
transform: translateX(0%);
}
}
<a class="slideRight">HI</a>
JSFiddle Example
Add a settimeout function
Hi there, you could add an event listen that get when you mouseover the certain element and then calls the function after 1 second.
$('slideRight').on('mouseover',function(){
window.setTimeout(function(){
$this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
});
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
Source:
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
I'm trying a technique described on CSS Tricks:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
I'm a bit stumped on this one... When I view the technique on the CSS Tricks website in Safari, it works fine... However, when I try the code out, I can't get it to work on Safari... Works fine in Firefox and Chrome.
Anyone have any ideas?
I greatly appreciate some extra eyes on this, because I've been staring at this way too long.
Thanks in advance.
JSFiddle:
http://jsfiddle.net/pjbsL1mk/1/
The code is pretty much verbatim, except that I added "-webkit-" along side the original code to the classes... Also, I'm using jQuery 1.8.3.
.come-in {
-webkit-transform: translateY(150px);
-webkit-animation: come-in 1s ease forwards;
-webkit-animation-delay: 0.2s;
transform: translateY(150px);
animation: come-in 1s ease forwards;
animation-delay: 0.2s;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s; /* So they look staggered */
}
.already-visible {
-webkit-transform: translateY(0);
-webkit-animation: none;
transform: translateY(0);
animation: none;
}
#-webkit-keyframes come-in {
to {
transform: translateY(0);
}
}
#keyframes come-in {
to {
transform: translateY(0);
}
}
You forgot to add -webkit- prefix on some properties:
#-webkit-keyframes come-in {
to {
-webkit-transform: translateY(0); // here
}
}
This should make the animation work. Also add -webkit- here:
.come-in:nth-child(odd) {
-webkit-animation-duration: 0.6s; // here
}
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.