I'm looking to animate some panels without any JS. The effect I want to create is similar to this: http://www.sequence.co.uk/case-studies/
I've got the animation about right and I can see in fire-bug that each li has its own delay using nth-child BUT the staggered delay isn't working.
See code below:
http://codepen.io/bakers37/pen/KwoNvB
#-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
}
#keyframes flip {
0% {
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
li
{
width: 200px;
height: 200px;
display: inline-block;
background: #ccc;
margin: 10px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
// Loop through the items and add some delay.
#for $i from 1 through 20 {
&:nth-child(#{$i}) {
#include transition-delay(1s * $i);
}
}
}
Turns out I was using 'transition-delay' and what I needed was 'animation-delay'. Now works. See http://codepen.io/bakers37/pen/myKPjV
#-webkit-keyframes flip {
0% {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
}
}
#keyframes flip {
0% {
transform: rotateY(-180deg);
opacity: 0.5;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
li
{
width: 200px;
height: 200px;
display: inline-block;
background: #ccc;
margin: 10px;
opacity: 0.5;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
// Loop through the items and add some delay.
#for $i from 1 through 20 {
&:nth-child(#{$i}) {
-webkit-animation-delay: (0.2s * $i);
-moz-animation-delay: (0.2s * $i);
animation-delay: (0.2s * $i);
}
}
}
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>
In the following code, I want to have the square shadow appear and rotate at the same time, but the display does not change. Any help is very appreciated.
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
It won't work like this because when you have it set to display:none; there's nothing to hover so the hover state never gets fired. You need to use only opacity to hide it rather than display:none;
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity:0;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#shadow:hover {
opacity: 0.2;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't hover a non-displayed element. There are a few solutions here, just as making the shadow a child of the test div.
Or, using a + CSS selector. In either case, the hover listener is on the visible element:
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow {
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
You can't animate "Display". If you want to fade in the box, have
display:block;
opacity:0;
and in your animations add
opacity:1;
this will fade in the box as it rotates.
You cannot hover an element not displayed like #shadow (with display:none), but you have to hover #test and apply the css rule to the sibiling next to #test, that is #shadow (using + selector)
#test:hover + #shadow
#test {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid green;
margin-top: 6px;
left: 51.5%;
background: red;
border-radius: 50%
}
#shadow {
position: absolute;
border: 3px solid black;
width: 120px;
height: 120px;
left: 50%;
opacity: 0.2;
display: none;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
transition-property: transform;
transition-duration: 1s;
}
#test:hover + #shadow{
display: block;
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div id="test"></div>
<div id="shadow"></div>
Sorry for the vague title, but essentially I copied some code from CodePen where it works flawlessly, but I can't get the exact same code to work in my project, or a jsFiddle I created.
Here's the relevant HTML:
<div class="loader loader--flipDelay loader--3d">
<span class="loader-item">1</span>
...
</div>
And the CSS for webkit browsers:
.loader-item {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 2px;
background-color: rgba(61, 92, 126, 0.7);
color: rgba(61, 92, 126, 0.7);
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-iteration-count: infinite;
}
.loader--flipDelay .loader-item {
-webkit-animation-name: flipDelay;
}
#keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
Here's the CodePen which looks great.
I attempted to copy all the code into my project, and the elements are there, but absolutely nothing happens to them.
Here's a jsFiddle which shows the code not running. Please note that this code is only prefixed to work in Chrome and other webkit browsers.
My first thought was that it was a prefixing problem, but after removing all the warnings, still nothing happens to those loader-items.
Your code is missing -webkit- prefixes for #keyframes.
I've added vendor prefix for the rest of the browsers as well.
Fiddle
body {
font-family: 'PT Sans', sans-serif;
text-align: center;
background-color: #000;
padding-top: 40px;
}
h1,
h2 {
background-color: rgba(200, 200, 200, 0.2);
padding: 20px;
text-transform: uppercase;
color: #fff;
}
h1 {
font-size: 24px;
margin-bottom: 40px;
}
h1 a {
display: block;
margin-top: 10px;
text-transform: none;
color: #aaa;
font-size: 16px;
text-decoration: none;
}
h2 {
font-size: 16px;
margin-bottom: 15%;
}
.loader {
display: block;
overflow: hidden;
margin-bottom: 15%;
font-size: 0;
}
.loader--3d {
transform-style: preserve-3d;
-webkit-perspective: 800px;
perspective: 800px;
}
.loader--slideBoth {
overflow: visible;
}
.loader-item {
display: inline-block;
width: 50px;
height: 50px;
margin-left: 2px;
background-color: rgba(61, 92, 126, 0.7);
color: rgba(61, 92, 126, 0.7);
-webkit-animation-duration: 2000ms;
-webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-animation-iteration-count: infinite;
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-iteration-count: infinite;
}
.loader-item:nth-child(1) {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.loader-item:nth-child(2) {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.loader-item:nth-child(3) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loader-item:nth-child(4) {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.loader-item:nth-child(5) {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.loader-item:nth-child(6) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.loader--slowFlip .loader-item {
-webkit-animation-name: slowFlip;
animation-name: slowFlip;
}
.loader--flipHoz .loader-item {
-webkit-animation-name: flipHoz;
animation-name: flipHoz;
}
.loader--fade .loader-item {
-webkit-animation-name: fade;
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
animation-name: fade;
}
.loader--slowFlip .loader-item:nth-child(1),
.loader--flipHoz .loader-item:nth-child(1) {
-webkit-animation-delay: 150ms;
animation-delay: 150ms;
}
.loader--slowFlip .loader-item:nth-child(2),
.loader--flipHoz .loader-item:nth-child(2) {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.loader--slowFlip .loader-item:nth-child(3),
.loader--flipHoz .loader-item:nth-child(3) {
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
.loader--slowFlip .loader-item:nth-child(4),
.loader--flipHoz .loader-item:nth-child(4) {
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.loader--slowFlip .loader-item:nth-child(5),
.loader--flipHoz .loader-item:nth-child(5) {
-webkit-animation-delay: 750ms;
animation-delay: 750ms;
}
.loader--slowFlip .loader-item:nth-child(6),
.loader--flipHoz .loader-item:nth-child(6) {
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
.loader--flipDelay .loader-item {
-webkit-animation-name: flipDelay;
animation-name: flipDelay;
}
.loader--flipDelayDown .loader-item {
-webkit-animation-name: flipDelay;
-webkit-animation-direction: reverse;
animation-name: flipDelay;
animation-direction: reverse;
}
.loader--slideDown .loader-item,
.loader--slideUp .loader-item {
-webkit-animation-name: slideDown;
-webkit-animation-duration: 800ms;
-webkit-animation-timing-function: linear;
animation-name: slideDown;
animation-duration: 800ms;
animation-timing-function: linear;
}
.loader--slideDown .loader-item {
transform-origin: top left;
}
.loader--slideUp .loader-item {
transform-origin: bottom left;
}
.loader--slideBoth .loader-item {
-webkit-animation-name: slideBoth;
-webkit-animation-duration: 1000ms;
transform-origin: bottom left;
-webkit-animation-timing-function: linear;
animation-name: slideBoth;
animation-duration: 1000ms;
animation-timing-function: linear;
}
/**********************************/
/* KEYFRAME ANIMATION DEFINITIONS */
/**********************************/
#-webkit-keyframes slowFlip {
0% {
transform: rotateX(0deg);
}
40% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
#-webkit-keyframes flipHoz {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
#-webkit-keyframes slideDown {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
#-webkit-keyframes slideBoth {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
#keyframes slowFlip {
0% {
transform: rotateX(0deg);
}
40% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(180deg);
}
}
#keyframes flipHoz {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(180deg);
}
}
#keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes flipDelay {
0% {
transform: rotateX(0deg);
transform-origin: 0 0 0;
opacity: 1;
}
30% {
transform: rotateX(90deg);
transform-origin: 0 0 0;
opacity: 0;
}
40% {
transform-origin: 0 0 0;
}
60% {
transform: rotateX(90deg);
opacity: 0;
transform-origin: 0 100% 0;
}
90% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: 0 100% 0;
}
}
#keyframes slideDown {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
#keyframes slideBoth {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
<h1>A collection of loaders using CSS 2D and 3D transforms created by #AshNolan_</h1>
<h2>Flip Delay Up</h2>
<div class="loader loader--flipDelay loader--3d"> <span class="loader-item">1</span>
<span class="loader-item">2</span>
<span class="loader-item">3</span>
<span class="loader-item">4</span>
<span class="loader-item">5</span>
<span class="loader-item">6</span>
</div>
That's not CSS. That's Sass, a language that compiles to CSS; while it doesn't add new styling capabilities (that's the browser's job), it does have a lot of language features that let you write simpler, cleaner, and less repetitive stylesheets. No browser can use Sass out of the gate; it has to be compiled to CSS first.
True as that is, I missed the point of the question. See the answer(s) above.
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