I need when last child (yellow square) animation ends, it starts on red square again.
I tried make for each square different animation, but that didn't work properly.
Also i tried to make infinite animation, but i want to make animation where first square translate to scale down, then up, then second square translate to scale down, then up, etc..., but with infinite animation it won't work even if i make higher delays.
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper,
.lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1) {
background: #e03318;
/* RED */
}
.upper:nth-child(2) {
background: #0daa34;
/* GREEN */
}
.lower:nth-child(1) {
background: #1662dd;
/* BLUE */
}
.lower:nth-child(2) {
background: #d1b608;
/* YELLOW */
}
.upper:nth-child(1) {
animation-delay: .5s;
}
.upper:nth-child(2) {
animation-delay: 1s;
}
.lower:nth-child(1) {
animation-delay: 1.5s;
}
.lower:nth-child(2) {
animation-delay: 2s;
}
#-webkit-keyframes scale {
50% {
transform: scale(0.2);
}
100% {
transform: scale(1);
}
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
This can be done with different animations for each rectangle:
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper, .lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1){
background: #e03318; /* RED */
}
.upper:nth-child(2){
background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
background: #d1b608; /* YELLOW */
}
.upper:nth-child(1) {
animation: scale-1 2s infinite;
}
.upper:nth-child(2) {
animation: scale-2 2s infinite;
}
.lower:nth-child(1) {
animation: scale-3 2s infinite;
}
.lower:nth-child(2) {
animation: scale-4 2s infinite;
}
#-webkit-keyframes scale {
50% { transform: scale(0.2); }
100% { transform: scale(1); }
}
#keyframes scale-1 {
0% { transform: scale(1); }
12.5% { transform: scale(0.2); }
25% { transform: scale(1); }
}
#keyframes scale-2 {
25% { transform: scale(1); }
37.5% { transform: scale(0.2); }
50% { transform: scale(1); }
}
#keyframes scale-3 {
50% { transform: scale(1); }
62.5% { transform: scale(0.2); }
75% { transform: scale(1); }
}
#keyframes scale-4 {
75% { transform: scale(1); }
87.5% { transform: scale(0.2); }
100% { transform: scale(1); }
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
Looking at Animista.net I would like to write some custom CSS animations. So I thought I would try by using one of their examples, and then tweaking it for my personal use.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
<div class="box"></div>
But I cannot get the animations to work at all.
What am I doing wrong?
Here you are. You must add animation.
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Codepen
You also need to define the #keyframes to make the animation work. See the attached snippet.
.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation: fade-in 1.2s steps(80, end) both;
-moz-animation: fade-in 1.2s steps(80, end) both;
animation: fade-in 1.2s steps(80, end) both;
}
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-moz-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#-o-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1.0;
}
}
<div class="box"></div>
Just curious to know why this simple animation delay wont seem to work. I just want a delay of 7s before the fade in of the element. Very simple im sure but been looking at it for to long now.
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
animation-delay: 7s;
-webkit-animation-delay: 7s;
animation: fadein 2s linear;
-webkit-animation: fadein 2s linear;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Put the animation delay after the animation, because the delay needs to be attached to the animation in question(the order is important):
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
-webkit-animation: fadein 2s linear;
animation: fadein 2s linear;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Or using a shorthand way, remove animation-delay: 7s; and -webkit-animation-delay: 7s; and add the delay time to the animation properties like this:
-webkit-animation:fadein 2s linear 7s;
animation:fadein 2s linear 7s;
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
-webkit-animation: fadein 2s linear 7s;
animation: fadein 2s linear 7s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="box1">
<div class="box2">
<p>some text</p>
</div>
</div>
Try using the long-form animation properties:
animation-delay
animation-name
animation-duration
animation-timing-function
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
opacity: 0;
-webkit-animation-delay: 7s;
-webkit-animation-name: fadein;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-delay: 7s;
animation-name: fadein;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>
This code below works I set the initial opacity of the box to 0 so it "fades in" also the animation delay property seems to work only if you state it after the animation itself. I also added animation-fill-mode: forwards; to keep the box being displayed after the animation.
.box1 {
width: 100px;
margin: 0 auto;
position: relative;
border: 1px solid blue;
}
.box2 {
background: red;
color: black;
text-align: center;
animation: fadein 2s linear;
-webkit-animation: fadein 2s linear;
animation-delay: 7s;
-webkit-animation-delay: 7s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 0;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class= "box1">
<div class="box2">
<p>some text</p>
</div>
</div>
I am having a look at CSS3 keyframes and want to have a box that eases in then eases out for the specified iteration-count, this is what I have so far it eases in then disappears then eases in again.
I want the box to ease in then ease out. See my fiddle. What do I need to do to achieve this?
<div id="content">
<span class="aniamte"></span>
</div>
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.aniamte {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: reset, fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 5;
animation-delay: 0, 1s;
}
I believe you're looking for animation-direction:alternate, but your question is not very clear. This will make your element use the keyframes from 0% to 100% for the specified duration then go from 100% to 0% after the first iteration is complete
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate {
background: red;
display: inline-block;
height: 100px;
width: 100px;
animation-name: fade-in;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-direction:alternate;
animation-iteration-count: 5;
}
Demo
I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...
So it might be like
Loading...
Loading..
Loading.
Loading...
Loading..
And basically just continue like that. Any ideas?
Edit: like this: http://playground.magicrising.de/demo/ellipsis.html
How about a slightly modified version of #xec's answer: http://codepen.io/thetallweeks/pen/yybGra
CSS Animation that uses steps. See MDN docs
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4, end) 900ms infinite;
animation: ellipsis steps(4, end) 900ms infinite;
content: "\2026";
/* ascii code for the ellipsis character */
width: 0px;
}
#keyframes ellipsis {
to {
width: 40px;
}
}
#-webkit-keyframes ellipsis {
to {
width: 40px;
}
}
<h1 class="loading">Loading</h1>
#xec's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.
You could try to use the animation-delay property and time each ellipsis character. In this case I've put each ellipsis character in a <span class> so I can animate them separately.
I made a demo, which isn't perfect, but it shows at least what I mean :)
The code from my example:
HTML
Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>
CSS
.one {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.0s;
animation: dot 1.3s infinite;
animation-delay: 0.0s;
}
.two {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.2s;
animation: dot 1.3s infinite;
animation-delay: 0.2s;
}
.three {
opacity: 0;
-webkit-animation: dot 1.3s infinite;
-webkit-animation-delay: 0.3s;
animation: dot 1.3s infinite;
animation-delay: 0.3s;
}
#-webkit-keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes dot {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Even a more simple solution, works pretty well!
<style>
.loading::after {
display: inline-block;
animation: dotty steps(1,end) 1s infinite;
content: '';
}
#keyframes dotty {
0% { content: ''; }
25% { content: '.'; }
50% { content: '..'; }
75% { content: '...'; }
100% { content: ''; }
}
</style>
<div class="loading">Loading</div>
Just edited the content with animation instead of hiding some dots...
Demo here: https://jsfiddle.net/f6vhway2/1/
Edit:
Thanks to #BradCollins for pointing out that content is not an animatable property.
Currently, (2021) this works in Chrome/WebKit/Blink/Electron and Firefox and new version of Edge.
Short answer is "not really". However, you can play around with animating width and overflow hidden, and maybe get an effect that is "close enough". (code below tailored for firefox only, add vendor prefixes as needed).
html
<div class="loading">Loading</div>
css
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-moz-animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
#-moz-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
demo: http://jsfiddle.net/MDzsR/1/
edit
It appears chrome has issues with animating the pseudo-element. An easy fix is to wrap the ellipsis in its own element. Check out http://jsfiddle.net/MDzsR/4/
A late addition but I found a way to do this which supports centered text.
<element>:after {
content: '\00a0\00a0\00a0';
animation: progress-ellipsis 5s infinite;
}
#keyframes progress-ellipsis {
0% {
content: '\00a0\00a0\00a0';
}
30% {
content: '.\00a0\00a0';
}
60% {
content: '..\00a0';
}
90% {
content: '...';
}
}
You can animate clip (or better clip-path if you don't need IE support)
div {
display: inline-block;
font-size: 1.4rem;
}
div:after {
position: absolute;
margin-left: .1rem;
content: ' ...';
animation: loading steps(4) 2s infinite;
clip: rect(auto, 0px, auto, auto);
}
#keyframes loading {
to {
clip: rect(auto, 20px, auto, auto);
}
}
<div>Loading</div>
Well Actually there is a pure CSS way of doing this.
I got the example from CSS Tricks, but made it also to be supported in Internet Explorer (I have tested it in 10+).
Check the Demo: http://jsfiddle.net/Roobyx/AT6v6/2/
HTML:
<h4 id="searching-ellipsis"> Searching
<span>.</span>
<span>.</span>
<span>.</span>
</h4>
CSS:
#-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#-webkit-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#-moz-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#-o-keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#keyframes opacity {
0% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
100% {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
}
#searching-ellipsis span {
-webkit-animation-name: opacity;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: opacity;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-ms-animation-name: opacity;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-ms-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
-webkit-animation-delay: 300ms;
-moz-animation-delay: 300ms;
-ms-animation-delay: 300ms;
-o-animation-delay: 300ms;
animation-delay: 300ms;
}
I found clip-path to be the cleanest, with the following benefits:
Does not use width, thus:
works independent of how wide the ellipsis is in whatever font is used.
Does not shift the layout (good for performance, and allows more text behind it without that moving around or reflow).
.loading-ellipsis:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis-animation steps(1,end) 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
/* Enable this to see what is going on: */
/* background-color: red; */
}
#keyframes ellipsis-animation {
0% { clip-path: inset(0 100% 0 0); }
25% { clip-path: inset(0 66.6% 0 0); }
50% { clip-path: inset(0 33.3% 0 0); }
75% { clip-path: inset(0 0 0 0); }
}
<span class="loading-ellipsis">Loading</span> More text behind it that does not move
Credits go to #AaylaSecura's comment, and I improved that to use steps(1,end). This works because I end the animation at 75%, so that the last step shows the full expansion of the ellipsis (the third dot).
(There is an implicit 100% { clip-path: inset(0 0 0 0); } behind it that need not be written.)
Here is my solution with pure css https://jsfiddle.net/pduc6jx5/1/
explained: https://medium.com/#lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc
scss
.dot1 {
animation: visibility 3s linear infinite;
}
#keyframes visibility {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot2 {
animation: visibility2 3s linear infinite;
}
#keyframes visibility2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot3 {
animation: visibility3 3s linear infinite;
}
#keyframes visibility3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
html
Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
I did exactly what #CodeBrauer very cleanly did above, but because my text was text-align: center (this works for right, too) and I didn't want the text to move over every time a period was added, I added "punctuation spaces":
<style>
.loading::after {
display: inline-block;
animation: dotty steps(1,end) 1s infinite;
content: '';
}
#keyframes dotty {
0% { content: '\2008\2008\2008'; }
25% { content: '.\2008\2008'; }
50% { content: '..\2008'; }
75% { content: '...'; }
100% { content: '\2008\2008\2008'; }
}
</style>
<div class="loading">Loading</div>