I implemented this nice little css-based loader I found and then realized it doesn't work on IE (I tried IE11). I thought maybe it needed the vendor specific prefixes, so I tried using an online autoprefixer using 'last 2 versions' as the filter and it adds '-webkit-' prefixes but not the '-ms-' which makes me wonder if there something wrong with the way the css code is written that makes the '-ms-' prefixes not show up. I tried manually replacing the '-webkit-' with '-ms-' but it still doesn't work on IE.
What is preventing this from working on IE?
Does the vendor prefixing have anything to do with it or not?
I haven't tried on any browser other than Chrome and IE at this point but would like to make it work on all major browsers last 2 versions if that is reasonable.
Original CSS - works great on Chrome but not on IE:
.page-loader{ background: #f9f9f9 none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9998;}
.loader {
height: 8px;
margin: 0 auto;
position: relative;
text-align: center;
top: 50%;
width: 44px;
}
.dot {
background: #ccc none repeat scroll 0 0;
border-radius: 50%;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot_1 {
animation: 1.5s linear 0s normal none infinite running animateDot1;
background: #f26f29 none repeat scroll 0 0;
left: 12px;
}.dot_2 {
animation: 1.5s linear 0.5s normal none infinite running animateDot2;
left: 24px;
}.dot_3 {
animation: 1.5s linear 0s normal none infinite running animateDot3;
left: 12px;
}.dot_4 {
animation: 1.5s linear 0.5s normal none infinite running animateDot4;
left: 24px;
}
#keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
#keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
#keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
#keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
Perhaps try removing the running values from your animation properties. This makes the animation work for me in IE11.
I see that there's some discussion of this issue here:
"CSS3 animation is not working in IE11 but works in other browsers"
Related
I recently found a flying bird animation that I have been attempting to implement into one of my recent projects. I have attempted to reciprocate the same exact animation, yet the animation appears to be broken on safari browsers (both mobile and desktop). I am approximately 95% certain that most of my css is correct, and that every property that requires it, has the -webkit prefix for safari.
With all that said, I have provided below a link to a Codepen that contains my exact code for the animation. As I mentioned before, if you open up the animation on Google Chrome, it works perfectly fine. Yet, when it is opened up on Safari, the animation acts completely different. Here are the primary issues I am noticing:
The 'Flying' animation appears to not be scrolling the bird background image properly(as this animation is meant to act like a flip book), which results in a previous frame of the bird appearing.
On Chrome, when the window is resized, the birds flight path adjusts to the width of the window, as I set the 'fly-across-1' animation (uses the transform property) to be responsive to the view window width. However, when you resize (try expanding the window) a safari window, the birds 'flight' does not reach the end of the window.
Not sure if any of this makes sense, but I have completely run out of mental capacity trying to adjust for the issues myself. If anyone has any idea what I am missing or has any suggestions, I would greatly appreciate the help. Thanks again.
Here is the Codepen
For reference, here is the css code:
.container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 35rem;
}
.bird-box {
position: absolute;
top: 20%;
left: -10%;
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
will-change: transform;
}
.bird-box-one {
animation: fly-across-1 7s linear infinite;
-webkit-animation: fly-across-1 7s linear infinite;
}
.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
background-size: auto 100%;
width: 22px;
height: 31.25px;
will-change: background-position;
animation: flying;
-webkit-animation: flying;
animation-timing-function: steps(10);
-webkit-animation-timing-function: steps(10);
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.bird-one {
animation-duration: 1.3s;
-webkit-animation-duration: 1.3s;
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
}
#keyframes flying {
100% {
background-position: -900px 0;
}
}
#-webkit-keyframes flying {
0% {
background-position: 0 0;
}
100% {
background-position: -900px 0;
}
}
#keyframes fly-across-1 {
0% {
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
}
10% {
transform: translateY(-2vh) translateX(10vw);
-webkit-transform: translateY(-2vh) translateX(10vw);
}
20% {
transform: translateY(-4vh) translateX(30vw);
-webkit-transform: translateY(-4vh) translateX(30vw);
}
30% {
transform: translateY(-6vh) translateX(50vw);
-webkit-transform: translateY(-6vh) translateX(50vw);
}
40% {
transform: translateY(-5vh) translateX(70vw);
-webkit-transform: translateY(-5vh) translateX(70vw);
}
50% {
transform: translateY(-3vh) translateX(90vw);
-webkit-transform: translateY(-3vh) translateX(90vw);
}
60% {
transform: translateY(-2vh) translateX(110vw);
-webkit-transform: translateY(-2vh) translateX(110vw);
}
100% {
transform: translateY(0) translateX(110vw);
-webkit-transform: translateY(0) translateX(110vw);
}
}
#-webkit-keyframes fly-across-1 {
0% {
transform: translateX(-10vw);
-webkit-transform: translateX(-10vw);
}
10% {
transform: translateY(-2vh) translateX(10vw);
-webkit-transform: translateY(-2vh) translateX(10vw);
}
20% {
transform: translateY(-4vh) translateX(30vw);
-webkit-transform: translateY(-4vh) translateX(30vw);
}
30% {
transform: translateY(-6vh) translateX(50vw);
-webkit-transform: translateY(-6vh) translateX(50vw);
}
40% {
transform: translateY(-5vh) translateX(70vw);
-webkit-transform: translateY(-5vh) translateX(70vw);
}
50% {
transform: translateY(-3vh) translateX(90vw);
-webkit-transform: translateY(-3vh) translateX(90vw);
}
60% {
transform: translateY(-2vh) translateX(110vw);
-webkit-transform: translateY(-2vh) translateX(110vw);
}
100% {
transform: translateY(0) translateX(110vw);
-webkit-transform: translateY(0) translateX(110vw);
}
}
I am trying to animate a SVG from 0deg to 360deg. But if i use the transform: rotate property then the svg loses its position and its not centre aligned when the browser resizes. I used transform-origin to 50%. But the svg loses its position.
HTML :
<div id="hexagon-spinner">
<Hexagon className="hexagon-loader" viewBox="0 0 65.103 75.174" />
</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
}
.hexagon-loader {
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
First of all, when it is 100%, you should define 360 degrees, not 359 degrees.
100% {
transform: rotate(359deg); // ->> 360deg
}
What to do about the average,
#keyframes spin {
0% {
transform: rotate(0deg);
transform-origin: -50% 50%;
}
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Finally,
If we need to shorten the code (since it will start with 0deg by default), if we enter only the parameter 100%, there will be no problem.
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Simple Code Snippet
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
}
<div>LOADING</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
display: flex;
align-items:center;
justify-content: center;
}
.hexagon-loader {
background-color: purple;
height: 40px;
width: 40px;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
display: inline-block;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div id="hexagon-spinner">
<div class="hexagon-loader"></div>
</div>
When we shift the element with the translate (to center it) we naturally distort its center. Therefore it will not work properly.
I suggest a solution for this. (flexbox) is to use. You will see an example below.
Note: (Don't forget to remove Absolute and Transform Origin features)
I set up a simple css animation, to make a circle grow, but it does not start. What is wrong?
js fiddle
HTML
<ul><li></li></ul>
CSS
li {
position: absolute;
height: 70px;
width: 70px;
display:block;
border: 5px solid red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
animation: growUp 1s;
animation-iteration-count: infinite;
}
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
You are using the wrong prefixes for your keyframes.
Try changing:
#keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
to
#keyframes growUp {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
That should fix your animation.
Read up here to see what prefixes you should use and where: http://shouldiprefix.com/
Updated fiddle as well: http://jsfiddle.net/6c79780r/4/
For completeness - the webpage "Should I Prefix" states you should prefix for animations like so: You can set it up this way for all prefixes as well.
#-webkit-keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
#keyframes MyAnimation {
0% { left: 0; }
50% { left: 200px; }
100% { left: 20px; }
}
.example.is-animating {
...
-webkit-animation: MyAnimation 2s; /* Chr, Saf */
animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}
A complete and comprehensive breakdown of the CSS3 animation property can be found here: http://css3files.com/animation/
I have made a heart using CSS. I was just looking for a way to make it beat / pulsate.
Here is the code (fiddle):
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
-webkit-animation: heart 1s linear infinite;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>
What a lovely post to begin the evening with.
Sure, this is possible with pure CSS - you are likely interested in animations:
CSS
#heart-container {
width: 100px;
height: 90px;
animation: pulsate 0.5s infinite;
}
#keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Working example on JSFiddle.
Just wrap your lovely heart in #heart-container, and you are good to go. Also, don't forget to include the vendor specific prefixes where necessary.
FYI, the animation shorthand property - similar to transition - also accepts an easing setting (timing-function), like ease-in-out. Or, use animation-timing-function.
See the animation easing example on JSFiddle.
Note
For anyone wondering why I suggested this approach instead of an alternating animation, this approach synergizes with easing functions pretty well.
The animation property is your friend. :)
#heart {
position: relative;
width: 100px;
height: 90px;
-webkit-animation: heartbeat .8s ease-in-out 0s infinite;
-moz-animation: heartbeat .8s ease-in-out 0s infinite;
animation: heartbeat .8s ease-in-out 0s infinite;
transform: scale(1);
}
#-moz-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#-webkit-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id = "heart"></div>
Create a beating heart icon using font-awesome, JQuery and CSS animations.
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale(.75);
}
100%
{
transform: scale( 1 );
}
}
create beating heart
I have this CSS3 animation working on codepen.
HTML
<div class="heart heart1"></div>
<div class="heart heart2"></div>
CSS3
html, body{
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
.heart1{
animation: heart-anim 1s linear .4s infinite;
}
.heart2{
animation: pounding .5s linear infinite alternate;
}
.heart1:after, .heart1:before{
background-color: #ff7693;
}
#keyframes pounding{
0%{ transform: scale(1.5); }
100%{ transform: scale(1); }
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
Check it here: http://codepen.io/RadValentin/pen/sfnCE
As you can see is working ok, BUT, if I post the exact code to my local server OR to jsfiddle it does not work any more: http://jsfiddle.net/40aydbfr/
I believe the animation is not made according to the best practices since it breaks very easily.
So, Why it does not work outside of codepen and how can I make it more cross browser compatible.
PS: Im using Chrome.
It doesn't work because you are missing vendor prefixes for -webkit- browsers.
The reason why it works on codepen is because, if you click on the settings button above the CSS window, you'll see that -prefix-free is enabled, which means it adds the prefixes automatically.
Always check browser support, if something doesn't work.
Updated Codepen
Updated Fiddle
html,
body {
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart1 {
-webkit-animation: heart-anim 1s linear .4s infinite;
animation: heart-anim 1s linear .4s infinite;
}
.heart2 {
-webkit-animation: pounding .5s linear infinite alternate;
animation: pounding .5s linear infinite alternate;
}
.heart1:after,
.heart1:before {
background-color: #ff7693;
}
#-webkit-keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
<div class="heart heart1"></div>
<div class="heart heart2"></div>