Right now my code has the animation appear then it applies the 2 second delay then the animation runs.
How do I keep the animation from first appearing before the delay and then the animation?
#-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
You can use animation-fill-mode:
The animation-fill-mode CSS property specifies how a CSS animation
should apply styles to its target before and after it is executing.
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and
retain this during the animation-delay period.
.fadeInUp1 {
animation-fill-mode: backwards;
}
#-webkit-keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInUp1 {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp1 {
-webkit-animation-name: fadeInUp1;
animation-name: fadeInUp1;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
<div class="fadeInUp1">Lorem ipsum</div>
Related
To terrify the guys at Pixar (with my animation skills), I am attempting to get a walking effect to work using CSS ...
Unfortunately, I am unable to work two different animation effects in parallel, I want the steps to rotate at a variable rate to the walkRight transition.
Here is my current attempt:
CSS
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 10s linear 0s;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
Here is an example JsFiddle
You could try to:
Use animation-iteration-count: 10 on hulk class and set is duration to 1s (as walkRight has 10s duration), this means the walk effect will be applied 10 times during the walk.
Prefix all properties using -webkit- to make sure browsers will render your animation properly, you could use autoprefixer (or similar) which does the job for you automatically.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
-webkit-animation-name: walkRight;
animation-name: walkRight;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
-webkit-animation-iteration-count: 10;
animation-iteration-count: 10;
}
#-webkit-keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes walkRight {
0% {
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>
You can use animation-iteration-count on steps animation and set shorter duration. You just need to match ending time for both walk and steps that will repeat itself n number of times, so in this case its about 9 if duration is 1s.
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 1s linear 0s;
animation-iteration-count: 9;
}
#keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
#-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
<div class="wrapper">
<img class="hulk" width="100px" src="http://vignette3.wikia.nocookie.net/heroup/images/4/4b/Thing_full_body.png/revision/latest?cb=20120117152657">
</div>
I seem to be having an problem on the iphone with keeping the end state of my animation, I have a fade in on the the text in my header that doesn't seem to persist it's end state, even when adding forwards. Any insight into this?
Here's the css:
#headerwrap h1 {
color: white;
font-size: 70px;
font-weight: 300;
margin: 0;
opacity: 1;
letter-spacing: 3px;
z-index: 9999;
animation: fadeInDown 3s forwards;
-moz-animation: fadeInDown 3s forwards; /* Firefox */
-webkit-animation: fadeInDown 3s forwards; /* Safari and Chrome */
-o-animation: fadeInDown 3s forwards; /* Opera */
}
And here's the animation keyframes
#-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
It fixed the problem on desktop, but when I check on my iphone they animations come in, then when they complete the text disappears.
Thanks!
I seemed to have fixed it by removing the transform:none; on the 100% frames.
I have a DIV that I want to scale in when I click a button and scale out when I click the DIV itself. I have the scale in part working great, but when I try and remove the fadeIn class when I scale out my animation fadeOut breaks.
Here is my fiddle
HTML
<button id="myBtn">Click Me</button>
<div id="animateBox" class="box"><div>
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
/* 60% {
transform: scale(0.4);
}
80% {
transform: scale(0.8);
opacity: 1;
} */
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 0;
}
}
jQuery
$('#myBtn').click(function() {
$('#animateBox').addClass("fadeIn");
});
$('#animateBox').click(function() {
$( this ).addClass( "fadeOut" );
$( this ).removeClass( "fadeIn" );
});
Just modified Nasir's answer and referred this answer to make the animation smooth.
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation-fill-mode:forwards;
/*FF 5+*/
-o-animation-fill-mode:forwards;
/*Not implemented yet*/
-ms-animation-fill-mode:forwards;
/*IE 10+*/
animation-fill-mode:forwards;
/*when the spec is finished*/
visibility:visible;
}
#keyframes fadeOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0);
}
}
Working Fiddle
try this .
everything is fine but in the css i have changed for you take a look ....
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
/* 60% {
transform: scale(0.4);
}
80% {
transform: scale(0.8);
opacity: 1;
} */
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut{
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.75s;
-webkit-animation-duration: 0.75s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility:visible
}
#keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.5);
opacity: 1;
}
}
#-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 1;
}
}
Ok so I am pretty new to css3 animations and I am trying to get to grips with it. So what I am trying to do is animate two images one to slide from the bottom and the other to slide in from the right and then repeat this. I have the images sliding in ok but what I cant get to work is repeating the 1st animation after the last has ended.
Below is the css that I have at the min:
.image-1{
-webkit-animation-iteration-count : infinite;
float:right;
animation-name: slideUp, hide;
-webkit-animation-name: slideUp, hide;
-moz-animation-name: slideUp, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
opacity: 0;
}
.image-2{
float:right;
animation-name: slideLeft, hide;
-webkit-animation-name: slideLeft, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay:6s, 6s;
-moz-animation-delay:6s, 6s;
-webkit-animation-delay:6s, 6s;
-o-animation-delay:6s, 6s;
opacity: 0;
}
#keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-moz-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-webkit-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-o-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
/*
==============================================
slideUp
==============================================
*/
#keyframes slideUp {
0% {
transform: translateY(100%);
opacity: 0.0;
}
50%{
transform: translateY(-2%);
opacity: 1;
}
65%{
transform: translateY(4%);
opacity: 1;
}
80%{
transform: translateY(-1%);
opacity: 1;
}
95%{
transform: translateY(2%);
opacity: 1;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
opacity: 0.0;
}
50%{
-webkit-transform: translateY(-3%);
opacity: 1;
}
65%{
-webkit-transform: translateY(5%);
opacity: 1;
}
80%{
-webkit-transform: translateY(-1%);
opacity: 1;
}
95%{
-webkit-transform: translateY(2%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
/*
==============================================
slideLeft
==============================================
*/
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
You can start a repeating animation with a delay (this delay should be the time your first animation takes) by using
animation-delay:2s;
and you repeat by using
animation-iteration-count:infinite;
You can find a nice example with all css3 animation properties here:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4
I've been playing around with this CSS3 Animation, but I can't get it to pivot from a different location than the middle.
It is an animation that causes a flip-like effect from the middle where the top-half goes into the negative z-axis and the bottom-half goes into the positive z-axis.
I am trying to get the pivot-point to be the top so as the element that this animation is applied to is transformed, the entire element goes into the positive z-axis.
And then the flipOut animation would just be the reverse of that.
I'd appreciate any help in getting this animation to behave as I described.
Here is the code that runs the animation right now:
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-ms-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
#-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
Set the transform origin:
transform-origin : center top;
Per MDN docs:
transform-origin: x-offset /* One-value syntax */ E.g. transform-origin: 2px
transform-origin: offset-keyword E.g. transform-origin: bottom
transform-origin: x-offset y-offset /* Two-value syntax */ E.g. transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword E.g. transform-origin: 2px left
transform-origin: x-offset-keyword y-offset E.g. transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword E.g. transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword E.g. transform-origin: top right
transform-origin: x-offset y-offset z-offset /* Three-value syntax */ E.g. transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset E.g. transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset E.g. transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset E.g. transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset E.g. transform-origin: bottom right 2cm