I thought each table row will move continuously move left to right but its overflowing :( I wanted when "T10" reach the end of the window it come on left :0 and start going to end, and when "T9" reach the end of window it come on left : 0 and start to end of window.... and so on....
td {
height :6vh;
width:20vw;
background-color: red;
animation: flow 1s infinite;
}
#keyframes flow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100vw);
}
}
<table>
<tr>
<td class="T1"> </td>
<td class="T2"></td>
<td class="T3"></td>
<td class="T4"></td>
<td class="T5"></td>
<td class="T6"></td>
<td class="T7"></td>
<td class="T8"></td>
<td class="T9"></td>
<td class="T10"></td>
</tr>
</table>
I'm not sure if I understood exactly what you want. But I've added two variants of a ticker that do per-item animation. If you want to build more complex animations I'd recommend using something like https://greensock.com/gsap/. With JS you have so much more control over the timing - which is a pain when doing keyframes in CSS it is quite limited.
.scroll-wrapper {
overflow: hidden;
background: #eee;
max-width: 100%;
height: 30px;
display: flex;
position: relative;
}
.scroll-item {
position: absolute;
top: 0;
left: -25%;
height: 100%;
width: 25%;
padding: 10px;
box-sizing: border-box;
text-align: center;
animation-name: ticker;
animation-duration: 4s;
animation-delay: 0s;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.scroll-item-alt {
animation-name: ticker-alt;
animation-duration: 4s;
animation-delay: 0s;
animation-direction: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.T1 {
animation-delay: 3000ms;
background-color: yellow;
}
.T2 {
animation-delay: 2000ms;
background-color: orange;
}
.T3 {
animation-delay: 1000ms;
background-color: red;
}
.T4 {
background-color: magenta;
}
.T1-alt {
animation-delay: 2400ms;
}
.T2-alt {
animation-delay: 1600ms;
}
.T3-alt {
animation-delay: 800ms;
}
.T4-alt {
animation-delay: 0ms;
}
#keyframes ticker {
0% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(400%, 0, 0);
}
}
#keyframes ticker-alt {
0% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(500%, 0, 0);
}
}
<div class="scroll-wrapper">
<span class="scroll-item T1">T1</span>
<span class="scroll-item T2">T2</span>
<span class="scroll-item T3">T3</span>
<span class="scroll-item T4">T4</span>
</div>
<div class="scroll-wrapper">
<span class="scroll-item scroll-item-alt T1 T1-alt">T1</span>
<span class="scroll-item scroll-item-alt T2 T2-alt">T2</span>
<span class="scroll-item scroll-item-alt T3 T3-alt">T3</span>
<span class="scroll-item scroll-item-alt T4 T4-alt">T4</span>
</div>
Related
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've got these animated divs with a round border with Font Awesome icons in them. What's the best way to vertically align them while keeping them in the middle throughout the transition?
Here's the animation on CodePen
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
Just with simply adding this to your CSS
CSS
.social span{
position: relative;
top: 50%;
transform: translateY(-50%);
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
.social span {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
Add line-height: 80px; to your .social class
.social:hover {
height: 80px;
line-height: 80px;
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
line-height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
line-height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
</a>
<a href="https://twitter.com/" target="_blank">
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
</a>
<a href="https://www.linkedin.com/" target="_blank">
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
</a>
<a href="https://www.github.com/" target="_blank">
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
</a>
<a href="https://www.facebook.com/" target="_blank">
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</a>
</div>
You can use display:table for outer container and display:table-cell and vertical-align:middle for inner element
#facebook, #twitter, #linkedin, #github, #phone {
display:table;
margin:auto
}
.fa {
display:table-cell;
vertical-align:middle
}
irrespective of height it will vertically center the inner content and it is also compatible with older browsers as well http://caniuse.com/#search=vertical-align
body {
background-color: #3498db;
}
.fa {
display:table-cell !important;
vertical-align: middle;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>
I'm getting more into animation property and keyframes. Got this loader thing I'm working on. I'm having a hard time getting to go from right to left with animation-delay and multiple animations approach.
This one dot is supposed to go from left > right, right > left.
Stop there for until the other dots pass back the other direction and start again, stop there until the other dots pass back....
My approach is:
Full solution at jsfiddle
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 1.66667s linear infinite 3.125s, load-through-left 1.66667s linear infinite 3.125s;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>
any suggestions for math improvements, I'm all for it.
EDIT
Final result
Here is an approach with single animation. Let me know if it's a direction for you or may I didn't understand your wish.
body {
background-color: #111111;
}
[data-am-animation] {
box-sizing: border-box;
background-color: white;
flex-direction: row;
margin: 30px;
position: relative;
height: 180px;
width: 120px;
}
[data-am-animation] .dot {
background-color: deepskyblue;
position: absolute;
height: 30px;
width: 30px;
border-radius: 50%;
}
[data-am-animation] .dot.down {
left: 30px;
animation-name: load-down;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.up {
left: 60px;
animation-name: load-up;
animation-duration: 5s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
}
[data-am-animation] .dot.through {
left: 0;
top: 50%;
margin-top: -15px;
/*animation-name: load-through;
animation-duration: ($animation-speed / 2.6);
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-delay: ($animation-speed / 1.3);*/
animation: load-through-right 5s linear infinite;
}
/* keyframes start */
#keyframes load-down {
0% {
transform: translate(0, 0);
background-color: deepskyblue;
}
100% {
transform: translate(0, 150px);
background-color: deeppink;
}
}
#keyframes load-up {
0% {
transform: translate(0, 150px);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
#keyframes load-through-right {
0%, 20% {
transform: translate(0, 0);
background-color: deepskyblue;
}
50%, 70% {
transform: translate(90px, 0);
background-color: deeppink;
}
}
#keyframes load-through-left {
0% {
transform: translate(90px, 0);
background-color: deeppink;
}
100% {
transform: translate(0, 0);
background-color: deepskyblue;
}
}
/* keyframes end */
<div data-am-animation>
<div class="dot through"></div>
<div class="dot down"></div>
<div class="dot up"></div>
</div>
I'm having a hard time making this preloader animation in CSS.
This is what I'm trying to make.
What am I doing wrong?
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
html, body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse .8s infinite linear;
}
.m {
animation: pulse .8s infinite linear;
animation-delay: .2s;
}
.r {
animation: pulse .8s infinite linear;
animation-delay: .4s;
}
#keyframes pulse {
0% { padding: 8px; }
50% { padding: 16px; }
100% { padding: 8px; }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
Use step-end:
animation: pulse .8s infinite step-end;
body{
padding-top: 40px; /* for demonstration purpose */
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.6em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite step-end;
animation-delay: .2s;
}
.m {
animation: pulse 2s infinite step-end;
animation-delay: .4s;
}
.r {
animation: pulse 2s infinite step-end;
animation-delay: .6s;
}
#keyframes pulse {
0% { transform: scale( 1 ); }
50% { transform: scale( 2 ); }
100% { transform: scale( 1 ); }
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
JSFiddle
Now just adjust the animation duration and delay time to make it more like in the OP.
Update: use transform: scale() to make the circle expand from its centar - reference
I have extra frames to the animation. Check below answer.
html,
body {
height: 100%;
}
.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.circle {
display: inline-block;
padding: 8px;
margin: 0 0.5em;
background: #000;
border-radius: 100%;
}
.l {
animation: pulse 2s infinite linear;
}
.m {
animation: pulse 2s infinite linear;
animation-delay: .3s;
}
.r {
animation: pulse 2s infinite linear;
animation-delay: .6s;
}
#keyframes pulse {
10% {
transform: scale(1);
}
20% {
transform: scale(1);
}
30% {
transform: scale(1.7);
}
50% {
transform: scale(1.7);
}
70% {
transform: scale(1.7);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
<div class="table">
<div class="cell">
<div class="circle l"></div>
<div class="circle m"></div>
<div class="circle r"></div>
</div>
</div>
I'm working off of a really great CSS3 animated background tutorial that can be found here
The only problem is that it won't work. Unfortunately, the tutorial is just a blog post with code, and there's no specific name for it, so I've been having trouble finding support for my issue.
It uses simple html markup:
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 07</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 08></span>
<div>
<h3></h3>
</div>
</li>
And then the rest is done in CSS3
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url() repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 40s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 40s linear infinite 0s;
-moz-animation: titleAnimation 40s linear infinite 0s;
-o-animation: titleAnimation 40s linear infinite 0s;
-ms-animation: titleAnimation 40s linear infinite 0s;
animation: titleAnimation 40s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/homepage/img01.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/homepage/img02.jpg);
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/homepage/img03.jpg);
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/homepage/img04.jpg);
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/homepage/img05.jpg);
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/homepage/img06.jpg);
animation-delay: 25s;
-webkit-animation-delay: 25s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/homepage/img07.jpg);
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/homepage/img08.jpg);
animation-delay: 35s;
-webkit-animation-delay: 35s;
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
There's even a backup in case the browser doesn't support CSS3 animations:
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
This is supposed to ensure that you don't end up with a blank page, which is what I have. I've re-checked my links, and almost entirely copied the demo, but it's not displaying on my page. Is anyone familiar with CSS3 and have any ideas as to what my issue could be?
Maybe the problem can be fixed with adding webkit and such to
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } so: #-webkit-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-moz-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-o-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }