CSS Animation on Mozilla Firefox - cross-browser

i have a little problem in my css animation, the code works in google chrome, ie9+ and safari but not in firefox.
I tried to use -moz-, but nothing happened. This animation have five images, but in mozilla only showed the first image.
Code:
.anima {
will-change: transform;
margin: 0 auto;
max-width: 436px;
width: 100%;
height: 400px;
-webkit-animation-name: effect; /* Chrome, Safari, Opera */
-webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
animation-name: effect;
animation-duration: 14s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes effect {
0% {transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
5% {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
10% {transform: rotate3d(1, 0, 0, 100deg);}
15% {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
25% {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
30% {transform: rotate3d(1, 0, 0, 100deg);}
35% {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
45% {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
50% {transform: rotate3d(1, 0, 0, 100deg);}
55% {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
65% {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
70% {transform: rotate3d(1, 0, 0, 100deg);}
75% {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
85% {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
90% {transform: rotate3d(1, 0, 0, 100deg);}
100% {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
}
/* Standard syntax */
#keyframes effect {
0% {transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
5% {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
10% {transform: rotate3d(1, 0, 0, 100deg);}
15% {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
25% {background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
30% {transform: rotate3d(1, 0, 0, 100deg);}
35% {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
45% {background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
50% {transform: rotate3d(1, 0, 0, 100deg);}
55% {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
65% {background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
70% {transform: rotate3d(1, 0, 0, 100deg);}
75% {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
85% {background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
90% {transform: rotate3d(1, 0, 0, 100deg);}
100% {background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat; transform: rotate3d(0, 0, 0, 0deg); margin: 0 auto!important;}
}
<div class="anima"></div>
I posted this code in CodePen also.
Thanks!


I solved the problem!
In firefox, it's not possible animate the property background
Sorry for the lack of information, my english isn't so good :/
For more informations, see this oficial mozilla page below!
https://bugzilla.mozilla.org/show_bug.cgi?id=1036761
Code below:
.anima-box, .anima-box div {
margin: 0 auto!important;
max-width: 436px;
width: 100%;
height: 400px;
}
.anima-box div {
will-change: transform, opacity;
position: absolute;
left: 0;
top: 0;
-webkit-animation-duration: 14s; /* Chrome, Safari, Opera */
animation-duration: 14s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.anima-fazer {
-webkit-animation-name: effect-fazer; /* Chrome, Safari, Opera */
animation-name: effect-fazer;
background: url("http://miceone.com.br/imagens/fazer-26fdbd895c.svg") 0% 0% / contain no-repeat;
opacity: 1.0;
}
.anima-evoluir {
-webkit-animation-name: effect-evoluir; /* Chrome, Safari, Opera */
animation-name: effect-evoluir;
background: url("http://miceone.com.br/imagens/evoluir-fb7c0c3ecb.svg") 0% 0% / contain no-repeat;
opacity: 0.0;
}
.anima-crescer {
-webkit-animation-name: effect-crescer; /* Chrome, Safari, Opera */
animation-name: effect-crescer;
background: url("http://miceone.com.br/imagens/crescer-a364c2e9fb.svg") 0% 0% / contain no-repeat;
opacity: 0.0;
}
.anima-acontecer {
-webkit-animation-name: effect-acontecer; /* Chrome, Safari, Opera */
animation-name: effect-acontecer;
background: url("http://miceone.com.br/imagens/acontecer-dedf63a20d.svg") 0% 0% / contain no-repeat;
opacity: 0.0;
}
.anima-acreditar {
-webkit-animation-name: effect-acreditar; /* Chrome, Safari, Opera */
animation-name: effect-acreditar;
background: url("http://miceone.com.br/imagens/acreditar-55f9efcefd.svg") 0% 0% / contain no-repeat;
opacity: 0.0;
}
#-webkit-keyframes effect-fazer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
5% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
10% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
90% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
95% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
}
#keyframes effect-fazer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
5% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
10% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
90% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
95% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
}
#-webkit-keyframes effect-evoluir {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
10% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
15% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
25% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
30% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#keyframes effect-evoluir {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
10% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
15% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
25% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
30% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#-webkit-keyframes effect-crescer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
30% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
35% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
45% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
50% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#keyframes effect-crescer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
30% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
35% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
45% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
50% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#-webkit-keyframes effect-acontecer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
50% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
55% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
65% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
70% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#keyframes effect-acontecer {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
50% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
55% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
65% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
70% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#-webkit-keyframes effect-acreditar {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
70% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
75% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
85% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
90% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
#keyframes effect-acreditar {
0% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
70% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
75% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
85% {transform: rotate3d(0, 0, 0, 0deg); opacity: 1.0;}
90% {transform: rotate3d(1, 0, 0, 100deg); opacity: 0.0;}
100% {transform: rotate3d(0, 0, 0, 0deg); opacity: 0.0;}
}
<div class="anima-box">
<div class="anima-fazer"></div>
<div class="anima-evoluir"></div>
<div class="anima-crescer"></div>
<div class="anima-acontecer"></div>
<div class="anima-acreditar"></div>
</div>

Related

Add CSS shaking animation to a button without hover

I am trying to make the button shake without hovering on it. When I am removing the "hover" element, the button doesn't shake at all. What should I change in the code to make it work?
.first_button:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<button class="first_button">Button</button>

Use the infinite prop for your animation.
More info on animation syntax
.first_button {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<button class="first_button">Button</button>

CSS Animation not working in Edge

I have this div with two spans inside, I made loader which has circle filling with red color, over and over again. Everything is working great in Chrome but on EGDE this circle is so buggy that makes no sense.
When I inspect it on EDGE I get everything stricken through for a span, transform, animation... But when I check it on Can I use, it says that every browser is compatible. Is there any prefix or anything that can fix this problem on edge. I tried to put compatibility meta tag in HEAD, doesn't work.
HTML
<section>
<div><span></span><span></span></div>
</section>
CSS
#-webkit-keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#-webkit-keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#-webkit-keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
#keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 8em;
width: 8em;
background-color: rgba(211,211,211,0.7);
border-radius: 50%;
}
.gray-circle{
background: gray;
width: 8em;
height: 8em;
display: flex;
align-items
}
div {
width: 3em;
height: 3em;
position: relative;
border-radius: 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-animation: flip 3s infinite;
animation: flip 3s infinite;
}
div span {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: #fff;
}
div span:before {
content: '';
z-index: -1;
position: absolute;
background: #fd395b;
top: -50%;
bottom: -50%;
width: 400%;
}
div span:nth-of-type(1) {
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
left: 50%;
right: 0;
}
div span:nth-of-type(1):before {
right: 0;
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
}
div span:nth-of-type(2) {
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
right: 50%;
left: 0;
}
div span:nth-of-type(2):before {
right: 50%;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
}
Codepen

Unfortunately certain webkit functions do not currently work on Edge. You can submit a feature request here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer
Although certain webkit functions have supposedly been in development since 2016 and still have yet to be properly implemented into the browser.

How to keep h2 tag centered while using bounceInDown class?

Basically I have an h2 tag that is centered but whenever I add the bounceInDown class from animate.css it makes the text in h2 not centered. I need the text in the h2 tag to stay centered while still having the bounceInDown class in use.
example of what it should look like:
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
text-align: center;
}
h2 {
display: inline-flex;
color: aquamarine;
font-family: Raleway;
opacity: .86;
font-size: 3em;
flex-direction: column;
align-items: center;
margin: 0;
position: absolute;
margin-top: 7%;
}
h2>span {
margin-left: auto;
font-size: .4em;
margin-top: -.4em;
}
#-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
<h2 class="animated bounceInDown">
Al-Saba<span>.net</span>
</h2>

Add left: 50%; transform: translateX(-50%);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
text-align: center;
}
h2 {
display: inline-flex;
color: aquamarine;
font-family: Raleway;
opacity: .86;
font-size: 3em;
flex-direction: column;
align-items: center;
margin: 0;
position: absolute;
margin-top: 7%;
left: 50%;
transform: translateX(-50%);
}
h2>span {
margin-left: auto;
font-size: .4em;
margin-top: -.4em;
}
#-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
#keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
#-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
<h2 class="animated bounceInDown">
Al-Saba<span>.net</span>
</h2>

CSS3 not work shake animation effect

I have This CSS3 animate code for shake effect in DIV action: (i copy this code from HERE)
CSS CODE:
.shake {
-webkit-animation-name: shake ;
animation-name: shake;
}
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
Now, in action when i see div shake action not work!?
for see css effect, How do can i fix this ?
DEMO

The animated class is missing. Take a look here to find more information on how Animate.css works. You actually do not need to copy the code. You can include the library into the header of your document.
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
/* add this class */
.animated {
-webkit-animation-duration:1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.shake {
-webkit-animation-name: shake;
animation-name: shake
}
<div class="animated shake">Shake this text</div>

Working, your missing the animation-duration: 4s;
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0)
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0)
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
animation-duration: 4s;
}
Fiddle: http://jsfiddle.net/pjra0sqk/2/

It is becuase you didn't give animation-duration: 1s;
Just give it solved your issue.
.shake {
-webkit-animation-name: shake;
animation-name: shake;
animation-duration: 1s;
-webkit-animation-duration:1s;
}
Check your updated Fiddle.

General Code snippet to make a div shake. If anyone is still interested:
#myDiv {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
/* Some additional styles for a better example */
background-color: #00ccff;
color: white;
text-align: center;
height: 200px;
width: 200px;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<div id="myDiv">Content of shaking div</div>
</body>
</html>

How to use animate.css shake with less shakes

I'm using animate.css for a CSS3 shake effect, the CSS looks like the snippet below. Right now it shakes back and forth multiple times and I'd like to cut the shakes in half. Is there a way to do this with animate css3 or do I need to modify the css3 below? If so, what's the best way?
#-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
#keyframes shake {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}

Not really sure how you want to "cut the shake in half". Do you mean the speed, sway??
Here is what I came up, demo
If you want to slow the animation down, change the `-webkit-animation-duration:
Here is a custom cool shake/wobble effect:
#keyframes shake {
0% {
-webkit-transform:translate(2px,1px) rotate(0deg)
}
10% {
-webkit-transform:translate(-1px,-2px) rotate(-1deg)
}
20% {
-webkit-transform:translate(-3px,0px) rotate(1deg)
}
30% {
-webkit-transform:translate(0px,2px) rotate(0deg)
}
40% {
-webkit-transform:translate(1px,-1px) rotate(1deg)
}
50% {
-webkit-transform:translate(-1px,2px) rotate(-1deg)
}
60% {
-webkit-transform:translate(-3px,1px) rotate(0deg)
}
70% {
-webkit-transform:translate(2px,1px) rotate(-1deg)
}
80% {
-webkit-transform:translate(-1px,-1px) rotate(1deg)
}
90% {
-webkit-transform:translate(2px,2px) rotate(0deg)
}
100% {
-webkit-transform:translate(1px,-2px) rotate(-1deg)
}
}
Here is a simple demo