Works correctly on my local filesystem, not from a server. It is starting out of sync for some reason. Thanks for any help. Only vendor prefixed for WebKit. Tested in Chrome 26.Demo: http://cssdesk.com/jjqKK
HTML:
<ul class="slides">
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li>
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li>
<li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li>
</ul>
CSS:
ul.slides{
position: relative;
background: #000;
height: 100px;
width: 200px;
padding: 0;
}
ul.slides li{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: inherit;
width: inherit;
padding: 0;
margin: 0;
-webkit-animation: slideshow 9s linear infinite;
}
ul.slides.clickpause:active li{
-webkit-animation-play-state:paused;
}
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; }
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; }
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; }
#-webkit-keyframes slideshow{
0%{
opacity: 0;
z-index: 2;
}
3%{
opacity: 1;
}
30%{
opacity: 1;
}
33%{
opacity: 0;
}
34%{
z-index: 1;
}
100%{
opacity: 0;
}
}
ul.slides li img{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
padding: 0;
margin: 0
}
ul.slides li span{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(40, 40, 40, 0.8);
color: #FFF;
padding: 5px
}
Demo: http://cssdesk.com/jjqKK
Please no answers that use JavaScript. Thanks!
Your animations might not always start at the same time.
I've found that negative delays work really well with keeping things in sync. With this technique, each animation will load at the same time, but some parts start in the past. Check out the jsbin example:
http://jsbin.com/EreYIdE/2/edit
edited to add example inline:
ul {
background: #000;
height: 100px;
padding: 0;
position: relative;
width: 200px;
}
li {
height: inherit;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: inherit;
-webkit-animation: slideshow 9s linear infinite;
animation: slideshow 9s linear infinite;
}
li:nth-child(1) {
-webkit-animation-delay: -9s;
animation-delay: -9s;
}
li:nth-child(2) {
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
li:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
#-webkit-keyframes slideshow {
0% {
opacity: 0;
}
3% {
opacity: 1;
}
30% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes slideshow {
0% {
opacity: 0;
}
3% {
opacity: 1;
}
30% {
opacity: 1;
}
33% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img {
margin: 0;
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
span {
background: rgba(40, 40, 40, 0.8);
color: #fff;
padding: 5px;
position: absolute;
right: 0;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul>
<li>
<img src="http://placehold.it/200x100">
<span>Image 1</span>
<li>
<img src="http://placehold.it/200x100">
<span>Image 2</span>
<li>
<img src="http://placehold.it/200x100">
<span>Image 3</span>
</ul>
</body>
</html>
You'll have to add an animation trigger using javascript
Javascript demo
window.onload = function (){ }
or
jQuery demo
$(window).load(function(){})
as CSS3 animations and transitions start immediately before document load.
Related
Good day to all
Is there a way to not play animation after page load? Without JS and CSS transition.
Searched here and couldn't find an answer.
I sketched a small example where you can clearly see this problem. See code below.
.tooltip {
position: absolute;
animation: fadeOut forwards alternate .8s;
background-color: #f00;
color: #fff;
padding: 20px;
}
button:hover .tooltip {
animation: fadeIn forwards alternate .8s;
}
#keyframes fadeIn {
0% {
display: none;
opacity: 0;
top: 100px;
left: 100px;
}
1% {
display: block;
opacity: 0;
top: 100px;
left: 100px;
}
100% {
display: block;
opacity: 1;
top: 0px;
left: 0px;
}
}
#keyframes fadeOut {
0% {
display: block;
opacity: 1;
top: 0px;
left: 0px;
}
99% {
display: block;
opacity: 0;
top: 100px;
left: 100px;
}
100% {
display: none;
opacity: 0;
top: 100px;
left: 100px;
}
}
<button>
<span>text</span>
<span class="tooltip">press my</span>
</button>
Thanks in advance.
I am using this radio button effect - https://codepen.io/tomma5o/pen/grJyzL/ which works OK, but now I ran into problem where a few of my options are longer text and it goes over bottom option (because there is 30px height on li).
Here is example - https://codepen.io/BrixyX/pen/OJMwjrN. Is there any easy fix for this, because whatever I try, I mess up the effect?
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
::selection {
background: none;
}
body {
background: #BADA55;
font-family: 'Roboto';
font-weight: 500;
text-transform: uppercase;
color: #2E8612;
overflow: hidden;
height: 100%;
}
h1 {
font-weight: 100;
text-align: center;
margin: 0;
padding: 0;
font-size: 50px;
}
h4 {
font-weight: 400;
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 50px;
}
.continput {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 270px;
padding: 16px;
box-sizing: border-box;
}
ul {
list-style-type: none;
width: 220px;
margin: auto;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
}
label:before {
content: "";
width: 15px;
height: 15px;
background: #fff;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked~.bullet {
position: absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #fff;
opacity: 0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked~.bullet .line.zero {
animation-name: drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.one {
animation-name: drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.two {
animation-name: drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.three {
animation-name: drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.four {
animation-name: drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.five {
animation-name: drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.six {
animation-name: drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.seven {
animation-name: drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0% {
opacity: 0;
transform: scale(10);
}
60% {
opacity: 1;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity: 0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity: 0;
}
}
<div class="continput">
<h1>Jelly Radio btn</h1>
<h4>I hope you enjoyed it</h4>
<ul>
<li>
<input checked type="radio" name="1">
<label>OMG a radio! Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option ...</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>Uuuuh radio</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>radio everywhere</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
</ul>
</div>
I have cleaned up a few things and created a new fiddle from your pen here.
Firstly, I've tried removing the absolute positioning being used in a lot of places.
I've also made use of the feature that the label element provides which is interaction with the input elements.
I've moved your radio elements inside the label and have also moved the bullet animation accordingly.
Overall, the label element is now being used as a wrapper for all your elements inside of it, and hence those elements would align themselves based on the size of their parent.
P.S., since I tried to wrap this up quickly, I've center-aligned the bullet inside your label using the translate(-50%) hack. There are other cleaner ways of doing this but this one was just a quicker way for now.
There are several ways available to fix the issue of long option texts covering the rest of the options.
The first option is to change the width of the continput class to a higher value so that more text can fit inside of the labels. The labels are being constrained by the margin and padding enabled by the list and list items the radio buttons are put inside of. Hence a wider width will mean that more option text can be neatly displayed.
The second option is to set the overflow property of the list items to hidden, like this (new property at the bottom of the definition):
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
overflow: hidden;
}
This way, text that cannot be displayed without overflowing from the list items will be hidden and not cover text belonging to radio buttons further down. There are also more options for the overflow setting; the Mozilla MDN web docs has a short article on the property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
The third option is a combination of these options above. This should result in something that looks and works in a way that suits your needs. If you haven't started inspecting and experimenting with your own content using something like Google Chrome's Inspect function yet, I recommend you to read a tutorial for the browser you are using. Zapier has an in-depth tutorial for Google Chrome here and I see that Microsoft have incorporated the same tools that are available in Google Chrome into their updated Microsoft Edge (with the blue and green logo).
I'm working on a css text slider animation. It originally had 5 items but I've removed one so now there are 4.
I'm having trouble with the keyframe calculations. There is a bit of a pause when the last item slides out and the first item slides back in again. It was all working fine when it had 5 items but removing one has affected the timings.
HTML:
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>
CSS:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align:center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
#keyframes cycle {
0% {
right: 0px;
}
4% {
right: 0px;
}
16% {
right: 0px;
opacity: 1;
z-index: 0;
}
20% {
right: 325px;
opacity: 0;
z-index: 0;
}
21% {
right: -325px;
opacity: 0;
z-index: -1;
}
50% {
right: -325px;
opacity: 0;
z-index: -1;
}
92% {
right: -325px;
opacity: 0;
z-index: 0;
}
96% {
right: -325px;
opacity: 0;
}
100% {
right: 0px;
opacity: 1;
}
}
#keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
16% {
right: -325px;
opacity: 0;
}
20% {
right: 0px;
opacity: 1;
}
24% {
right: 0px;
opacity: 1;
}
36% {
right: 0px;
opacity: 1;
z-index: 0;
}
40% {
right: 325px;
opacity: 0;
z-index: 0;
}
41% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
36% {
right: -325px;
opacity: 0;
}
40% {
right: 0px;
opacity: 1;
}
44% {
right: 0px;
opacity: 1;
}
56% {
right: 0px;
opacity: 1;
z-index: 0;
}
60% {
right: 325px;
opacity: 0;
z-index: 0;
}
61% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
56% {
right: -325px;
opacity: 0;
}
60% {
right: 0px;
opacity: 1;
}
64% {
right: 0px;
opacity: 1;
}
76% {
right: 0px;
opacity: 1;
z-index: -1;
}
80% {
right: 325px;
opacity: 0;
z-index: -1;
}
81% {
right: -325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
It's the final cycle4 animation that I've tried tweaking but I can't get the smooth transition from last to first working as it was.
Here's a codepen example
If you want your animation to remain 12s long then you need to realise that with 4 items, each item has 3s worth of animation time, and that every 1s of the animation is 8.33333% of the total animation time.
If you struggle visualising this kind of thing I'd advise setting up a spreadsheet or something to do the calculations:
You can then easily see the percentages of your keyframes as you change parameters such as the animation length and in/out time. Anyway, here's the snippet:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
right: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
text-align: center;
}
.slider li.anim1 {
animation: cycle 12s linear infinite;
}
.slider li.anim2 {
animation: cycle2 12s linear infinite;
}
.slider li.anim3 {
animation: cycle3 12s linear infinite;
}
.slider li.anim4 {
animation: cycle4 12s linear infinite;
}
#keyframes cycle {
0% {
right: -325px;
opacity: 0;
z-index: -1;
}
4.2% {
right: 0px;
opacity: 1;
z-index: 0;
}
20.8% {
right: 0px;
opacity: 1;
}
25% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
}
}
#keyframes cycle2 {
0% {
right: -325px;
opacity: 0;
}
25% {
right: -325px;
opacity: 0;
}
29.2% {
right: 0px;
opacity: 1;
}
45.8% {
right: 0px;
opacity: 1;
}
50% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle3 {
0% {
right: -325px;
opacity: 0;
}
50% {
right: -325px;
opacity: 0;
}
54.2% {
right: 0px;
opacity: 1;
}
70.8% {
right: 0px;
opacity: 1;
}
75% {
right: 325px;
opacity: 0;
z-index: -1;
}
100% {
right: -325px;
opacity: 0;
z-index: -1;
}
}
#keyframes cycle4 {
0% {
right: -325px;
opacity: 0;
}
74.99% {
right: -325px;
opacity: 0;
}
79.2% {
right: 0px;
opacity: 1;
}
95.8% {
right: 0px;
opacity: 1;
}
100% {
right: 325px;
opacity: 0;
z-index: -1;
}
}
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote"> Service to 200+ countries</div>
</li>
<li class="anim2">
<div class="quote">Same day delivery services</div>
</li>
<li class="anim3">
<div class="quote">Easy booking tools.</div>
</li>
<li class="anim4">
<div class="quote">Rated great.</div>
</li>
</ul>
</div>
</div>
</div>
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 3 years ago.
I have a jsfiddle here and animation named fromBottom is not working.
http://jsfiddle.net/8g5r2qcw/1/
html
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
relevant css
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
animation: fromBottom .5s ease-out;
}
I expect the button to move from bottom to its original position when page is loaded.
Try adding display: inline-block; to your .btn--animated and it'll work.
.header
{
background-image: url(https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/f_auto,q_auto,w_1100/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg);
background-blend-mode: multiply;
height: 80vh;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 70%);
position: relative;
}
.header::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #34c9eb, #0c4f5e);
opacity: 0.9;
z-index: -1;
}
.header__logo-box
{
position: absolute;
top: 5px;
left: 0;
width: 80px;
}
.header__logo
{
width: 100%;
height: 100%;
}
.header__text-box
{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary--main
{
display: block;
}
.heading-primary--sub
{
display: block;
}
.btn
{
padding: 10px 30px;
text-decoration: none;
color: inherit;
border-radius: 100px;
position: relative;
}
.btn--white
{
background-color: #fff;
}
.btn::after
{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .4s;
background-color: red;
z-index: -1;
border-radius: 100px;
}
.btn:hover::after
{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
/* this animation not working */
#keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
display: inline-block;
animation: fromBottom .5s ease-out;
}
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
Update - The pen below has been updated to show the end results.
I am trying to mimic signal animation using css animation but I cant seem to grasp the idea of animation delay. If you look here
http://codepen.io/anon/pen/YwZOmK?editors=110
.real-time-animation {
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.real-time-animation>div {
animation: sk-bouncedelay 3s infinite forwards;
}
.circle1 {
animation-delay: 2s;
}
.circle2 {
animation-delay: 1s;
}
#keyframes sk-bouncedelay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.circle {
position: relative;
width: 16em;
height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2 {
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3 {
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>
You should be able to understand what I am trying to accomplish. I want to start from showing nothing, then after 1 sec show the first bar, then after 1 sec, show the 2nd bar and finally after another 1 sec show the 3rd bar.
My solution:
http://codepen.io/anon/pen/JGWmJg?editors=110
.real-time-animation{
margin-top: 20px;
position: relative;
transform: scale(0.5) rotate(45deg);
transform-origin: 5% 0%;
}
.circle1, .circle2, .circle3{
animation: 4s infinite ease-in;
animation-delay: 1s;
}
.circle1{
animation-name: circle1;
}
.circle2{
animation-name: circle2;
}
.circle3{
animation-name: circle3;
}
#keyframes circle1 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 0;
}
75%{
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes circle2 {
0%{
opacity: 0;
}
25%{
opacity: 0;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes circle3 {
0%{
opacity: 0;
}
25%{
opacity: 1;
}
50%{
opacity: 1;
}
75% {
opacity: 1;
}
100%{
opacity: 0;
}
}
.circle {
position: relative;
width: 16em; height: 16em;
border-radius: 50%;
background: transparent;
border: 20px solid transparent;
border-top-color: darkblue;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.circle2{
top: 40px;
width: 12em;
height: 12em;
left: 33px;
}
.circle3{
top: 80px;
width: 8em;
height: 8em;
left: 66px;
}
You can change the speed of the animation duration: "animation: 4s infinite ease-in;"
As I understand your question animated opacity needs to be like this:
Progress \ Element
.circle1
.circle2
.circle3
0%
0
0
0
25%
0
0
1
50%
0
1
1
75%
1
1
1
100%
0
0
0
The opacity property is clamped which means if you set negative values, it will have the same effect as setting it to 0. The same goes for values larger than 1.
Using this property, we can subtract a constant value from predefined CSS variables and use that as opacity.
.real-time-animation {
zoom: 10;
width: 8px;
height: 8px;
position: relative;
display: inline-block;
}
.real-time-animation>.circle {
animation: circle 4s infinite ease-in;
}
.circle1 {
--circle: 1;
}
.circle2 {
--circle: 2;
}
.circle3 {
--circle: 3;
}
#keyframes circle {
0%, 100% {
opacity: 0;
}
25% {
opacity: calc(var(--circle) - 2);
}
50% {
opacity: calc(var(--circle) - 1);
}
75% {
opacity: 1;
}
}
.circle {
border-radius: 50%;
background: transparent;
border: 1px solid transparent;
border-top-color: darkblue;
position: absolute;
margin: 0;
box-sizing: border-box;
top: 100%;
left: 0%;
width: calc(16px - (var(--circle) - 1)*4px);
height: calc(16px - (var(--circle) - 1)*4px);;
transform: rotate(45deg) translate(-50%, -50%);
transform-origin: 0 0;
}
<div class="real-time-animation">
<div class="circle circle1"> </div>
<div class="circle circle2"> </div>
<div class="circle circle3"> </div>
</div>