Related
I am working on a CSS animation that should look similar to this and I am almost there, but I don't know how to get it work correctly.
For everyone who cannot or doesn't want to view the links:
Using CSS I want an animation that transforms a three bar menu icon into an X. I can make the "bars" overlap and rotate, but the strokes are far from being symmetrical.
this is my code:
HTML:
<div class="container">
<div class="centerized">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</div>
</div>
SCSS:
#keyframes ani1{
0% {margin-bottom: 16%;}
50% {margin-bottom: none; transform: translate(0, 20px);}
100% {margin-bottom: none; transform: rotate(30deg);}
}
#keyframes ani2{
0% {margin-bottom: 16%; opacity: 1;}
75% {margin-bottom: none; opacity: 0;}
100% {margin-bottom: none; opacity: 0;}
}
#keyframes ani3{
0% {margin-bottom: 16%;}
50% {margin-bottom: none; transform: translate(0px, -20px);}
100% {margin-bottom: none; transform: rotate(-30deg);}
}
Since I believe the fault lies within the way I positioned the elements during the animation I am including this part. To see the whole code I suggest to click on the link above.
I added the CSS's to your html to make that animation. I guess you want the effect to be on hover as in your codepen:
.You-need-this-container {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
background: #3FAF82;
color: #fff;
}
.container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centerized {
width: 80px;
height: 52px;
cursor: pointer;
z-index: 50;
}
.centerized .bar1,
.centerized .bar2,
.centerized .bar3 {
height: 8px;
width: 100%;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
-webkit-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.centerized .bar1 {
-webkit-animation: animate-line-1-rev .7s ease-in-out;
animation: animate-line-1-rev .7s ease-in-out;
}
.centerized .bar2 {
margin: 14px 0;
-webkit-animation: animate-line-2-rev .7s ease-in-out;
animation: animate-line-2-rev .7s ease-in-out;
}
.centerized .bar3 {
-webkit-animation: animate-line-3-rev .7s ease-in-out;
animation: animate-line-3-rev .7s ease-in-out;
}
.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 {
background-color: #fff;
}
.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 {
background-color: #fff;
}
.centerized:hover .bar1 {
-webkit-animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.centerized:hover .bar2 {
-webkit-animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.centerized:hover .bar3 {
-webkit-animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
}
.no-animation {
-webkit-animation: none !important;
animation: none !important;
}
#-webkit-keyframes animate-line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
}
#keyframes animate-line-1 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
}
#-webkit-keyframes animate-line-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
#keyframes animate-line-2 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes animate-line-3 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
}
#keyframes animate-line-3 {
0% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
}
#-webkit-keyframes animate-line-1-rev {
0% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#keyframes animate-line-1-rev {
0% {
-webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
transform: translate3d(0, 22px, 0) rotate(45deg);
}
50% {
-webkit-transform: translate3d(0, 22px, 0) rotate(0);
transform: translate3d(0, 22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#-webkit-keyframes animate-line-2-rev {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#keyframes animate-line-2-rev {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes animate-line-3-rev {
0% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
#keyframes animate-line-3-rev {
0% {
-webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
transform: translate3d(0, -22px, 0) rotate(135deg);
}
50% {
-webkit-transform: translate3d(0, -22px, 0) rotate(0);
transform: translate3d(0, -22px, 0) rotate(0);
}
100% {
-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
transform: translate3d(0, 0, 0) rotate(0deg);
}
}
<div class="You-need-this-container">
<div class="container">
<div class="centerized">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</div>
</div>
</div>
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>
I´m trying to chain/merge two css animations. When the first ends, the second must starts. In the beginning I was doing it adjusting the timing and merging the animations classes with the transformations. Now I read that is possible to chain different animations, but although I´m trying to do it, it's not working. Only the last animation is playing.
If you want to see how it´s working now (before you give me any clue or help) look at coronafuneral.com. It is the "Contactar" text at the right part of the screen.
.animacion_telefono {
/* this is the class I attach to the anchor <a> text to animate */
animation-delay: 0s, 1.5s;
-webkit-animation-delay: 0s, 1.5s;
-webkit-animation-duration: 1s, 3s;
animation-duration: 1s, 3s;
-webkit-animation-name: zoomInLeft, zoomOutDown;
animation-name: zoomInLeft, zoomOutDown;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
<div id="contact-link" style="width: 150px; height: 150px; background-color: red;">
<a style="display:block;" class="animacion_telefono" href="http://coronafuneral.com/contactanos" title="Contact us">Contact us</a>
</div>
This is the zoomOutDown animation, the only one that plays:
#-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
And this is the CSS animation that is not working at all:
#-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
#keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}
60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
I noticed that if I change the order of the animations in animation-name: zoomInLeft, zoomOutDown; then the animation that plays is zoomInLeft instead.
What I´m doing wrong? I can't see the point.
Thanks in advance
EDIT: this is the fiddle, this is how it works now, just playing the last animation
https://jsfiddle.net/7b5o2skb/
2 animations of the same type ( scale in your case ) can't be assigned to the same element because one will overwrite the other
you could wrap the a in a p and assign one animation to a and one to p
see here jsfiddle
HTML :
<p class="animateme">
<a style="display:block;" class="animacion_telefono" href="http://coronafuneral.com/contactanos" title="Contact us">Contact us</a>
</p>
CSS :
p.animateme {
animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
but making animations go on forever ( infinite ) i don't think you can only with css. you have to tell one animation to start after the other over and over again. now, with css , it only works the first time because the first animation starts immediately after it finished its animation, and the second animation isn't finished yet. so they will animate the elements in the same time ( except the first time they animate )
this can be done with jq but not css
I want to float the button from right bottom to right top. While floating, it comes to the middle left like shown in attached image. I have tried a few steps but it is not working properly. Any help is highly appreciated. Thank you!
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#keyframes bounceInUp {
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);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, -1000);
transform: translate3d(0, 10px, -1000);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<div style="float:right;" class="animated infinite bounceInUp">Button</div>
Instead of float: right, I have used position: absolute and right: for the desired effect. Check below snippet.
I have minimized the frames, please modify as per your needs.
.animated {
background-color: coral;
padding: 4px 10px;
position: absolute;
right: 0px;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#keyframes bounceInUp {
from {
right: 0px;
opacity: 0;
-webkit-transform: translateY(100vh);
transform: translateY(100vh);
}
60% {
opacity: 1;
right: 40%;
}
to {
right: 0px;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<div class="animated infinite bounceInUp">Button</div>
I would like to ask how to properly slow down animation in css, im making my portfolio and cant get it working..
I want to show my photo first and after that animation is done, show the welcome text, it's appearing at the same time at the moment.
I'm using unedited animate.css(can't paste it here because its too long, and im limited to 30k characters)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Portfolio - Martin Mičulka</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<!-- Loading Bootstrap -->
<link href="css/vendor/bootstrap.css" rel="stylesheet">
<link href="animate.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="css/flat-ui.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Navigace</span>
</button>
<a class="navbar-brand" href="index.html">martin mičulka</a>
</div><!--navbar-header-->
<div class="collapse navbar-collapse" id="navbar-collapse-01" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>domů</li>
<li>o mě</li>
<li>galerie</li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<section id="home" class="scroll-panel">
<div class="jumbotron" id="modry">
<div class="container">
<center>
<img src="img/fotka.jpg" class="img-circle animated bounceInDown" width="200px" height="200px" id="fotka" >
<div class="col-md-12">
<div class="row">
<p class="lead animated flipInX" id="welcome">Vítejte na mém portfoliu, zde budu uveřejňovat svoje dosavadní práce</p>
</div><!--row-->
</div><!--col-md-12-->
</center><!--center-->
</div><!--container-->
</div><!--jumbotron-->
</section>
<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/vendor/video.js"></script>
<script src="js/flat-ui.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
</body>
</html>
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
#keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-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);
}
100% {
-webkit-transform: none;
transform: none;
}
}
#keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-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);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
This is my HTML of my website, im using bounceInDown and flipInX animations.
Thanks for the help ! :)
You could detect the end of the first animation and then call the second one in another function.
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
There are also some examples here: http://davidwalsh.name/css-animation-callback