First I'll say that I have next to no CSS skills (slowly trying to fix that) so if its something obvious I do apologize.
In the following animation I have a bunch of delays, one for each letter.
If all goes well you end up with a nice wavey effect, problem is it hardly ever does.
If you keep refreshing sooner or later you'll see it....for me its more often than not the P and A, they end up going up and down at the same rate (there was no delay).
Any advice on how to get this to work sure would be appreciated.
http://jsbin.com/IkuR/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Trash</title>
<style id="jsbin-css">
.wavey li:nth-child(1) {
-webkit-animation-delay: 0.1s;
}
.wavey li:nth-child(2) {
-webkit-animation-delay: 0.3s;
}
.wavey li:nth-child(3) {
-webkit-animation-delay: 0.5s;
}
.wavey li:nth-child(4) {
-webkit-animation-delay: 0.7s;
}
.wavey li:nth-child(5) {
-webkit-animation-delay: 0.9s;
}
.wavey li:nth-child(6) {
-webkit-animation-delay: 1.1s;
}
.wavey li:nth-child(7) {
-webkit-animation-delay: 1.3s;
}
.wavey li:nth-child(8) {
-webkit-animation-delay: 1.5s;
}
.wavey li:nth-child(9) {
-webkit-animation-delay: 1.7s;
}
.wavey li {
width:41px;
font-size:20px;
display:inline-block;
margin:0px;
padding:0px;
-webkit-animation: upndown 3s infinite;
}
.wavey {
-webkit-backface-visibility: hidden;
line-height:69px;
color:white;
font-family: "pixel";
font-size: 0;
margin:0px;
padding:0px;
border:0px;
display:inline-block;
position:absolute;
list-style-type: none;
}
#-webkit-keyframes upndown {
0% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translateY(50px);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-in-out;
}
}
html {
background-color:#000;
font-size: 0;
}
body {
font-size: 0;
overflow:hidden;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<ul class="wavey">
<li>P</li>
<li>A</li>
<li>E</li>
<li>z</li>
<li> </li>
<li>C</li>
<li>d</li>
<li>K</li>
<li>.</li>
</ul>
</body>
</html>
I just found a solution for myself :)
If this happens to anyone else try using negative values for the delay, this seems to be working great.
To quote the MDN....
Specifying a negative value for the animation delay causes the
animation to begin executing immediately. However, it will appear to
have begun executing partway through its cycle. For example, if you
specify -1s as the animation delay time, the animation will begin
immediately but will start 1 second into the animation sequence.
Fixed code....
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Trash</title>
<style id="jsbin-css">
.wavey li:nth-child(1) {
-webkit-animation-delay: -0.1s;
}
.wavey li:nth-child(2) {
-webkit-animation-delay: -0.3s;
}
.wavey li:nth-child(3) {
-webkit-animation-delay: -0.5s;
}
.wavey li:nth-child(4) {
-webkit-animation-delay: -0.7s;
}
.wavey li:nth-child(5) {
-webkit-animation-delay: -0.9s;
}
.wavey li:nth-child(6) {
-webkit-animation-delay: -1.1s;
}
.wavey li:nth-child(7) {
-webkit-animation-delay: -1.3s;
}
.wavey li:nth-child(8) {
-webkit-animation-delay: -1.5s;
}
.wavey li:nth-child(9) {
-webkit-animation-delay: -1.7s;
}
.wavey li {
width:41px;
font-size:20px;
display:inline-block;
margin:0px;
padding:0px;
-webkit-animation: upndown 3s infinite;
}
.wavey {
-webkit-backface-visibility: hidden;
line-height:69px;
color:white;
font-family: "pixel";
font-size: 0;
margin:0px;
padding:0px;
border:0px;
display:inline-block;
position:absolute;
list-style-type: none;
}
#-webkit-keyframes upndown {
0% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-in-out;
}
50% {
-webkit-transform: translateY(50px);
-webkit-animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(0px);
-webkit-animation-timing-function: ease-in-out;
}
}
html {
background-color:#000;
font-size: 0;
}
body {
font-size: 0;
overflow:hidden;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<ul class="wavey">
<li>P</li>
<li>A</li>
<li>E</li>
<li>z</li>
<li> </li>
<li>C</li>
<li>d</li>
<li>K</li>
<li>.</li>
</ul>
</body>
</html>
Related
I'm using keyframes so fade in the items on click, but I want them to then fade out when I click again. How do I do this with keyframes? Maybe this is something you can't actually do with keyframes?
codepen
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
.primary__nav {
display: none;
&.open {
display: block;
}
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
li {
opacity: 0;
-webkit-animation: fadeInRight 0.5s linear forwards;
animation: fadeInRight 0.5s linear forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
li:nth-of-type(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
li:nth-of-type(3) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
li:nth-of-type(4) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
li:nth-of-type(5) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
function bunAnimate(x) {
$(".icon-wrap").toggleClass("open");
$(".primary__nav").toggleClass("open");
}
You can make the list fade out item by item on click by more-or-less reversing the process.
There is one slight problem though, it's not possible to do this entirely in CSS as animations will not set the display property, so we can't get a keyframes declaration to set display: none on the primary nav element when the fading out has all completed. We get round this by introducing another class, display, which we call through Javascript. This is done rather crudely with a setTimeout, it may be possible to be more sophisticated by listening for the end of an animation, but it basically comes to the same thing.
function bunAnimate(x) {
document.querySelector(".icon-wrap").classList.toggle("open");
if (!document.querySelector(".primary__nav").matches('.open')) {
document.querySelector(".primary__nav").classList.add("open");
document.querySelector(".primary__nav").classList.add('display'); //display immediately it's open
}
else {
document.querySelector(".primary__nav").classList.remove("open");
setTimeout(function () {
document.querySelector(".primary__nav").classList.remove("display");
},550);//unpleasant but animations don't allow setting of display
}
}
.primary__nav {
display: none;
}
.primary__nav.display{
display: block;
}
.icon-wrap {
cursor: pointer;
}
ul {
position: relative;
list-style-type: none;
display: flex;
margin-bottom: 0;
}
li {
animation-name: fadeOutLeft;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
li:nth-of-type(1) {
animation-delay: 0.55s;
}
li:nth-of-type(2) {
animation-delay: 0.5s;
}
li:nth-of-type(3) {
animation-delay: 0.45s;
}
li:nth-of-type(4) {
animation-delay: 0.4s;
}
li:nth-of-type(5) {
animation-delay: 0.35s;
}
.open li {
display: block;
opacity: 0;
animation-name: fadeInRight;
}
.open li:nth-of-type(1) {
animation-delay: 0.35s;
}
.open li:nth-of-type(2) {
animation-delay: 0.4s;
}
.open li:nth-of-type(3) {
animation-delay: 0.45s;
}
.open li:nth-of-type(4) {
animation-delay: 0.5s;
}
.open li:nth-of-type(5) {
animation-delay: 0.55s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeOutLeft {
0% {
}
100% {
opacity: 0;
}
}
<div class="icon-wrap" onclick="bunAnimate(this)">
click me
</div>
<div class="primary__nav">
<ul id="primary" class="menu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Note: I used pure CSS as I'm not familiar with SCSS.
tell me why the code does not work, I hachu with the click to animate the li tags, the animation goes one after another, for 3 seconds
#menu #sm-menu:checked~.menu2 li {
animation: menu 1.5s;
animation-fill-mode: forwards;
}
#keyframes menu {
from {
transform: translateY(0px);
}
to {
transform: translateY(300px);
}
}
#menu .menu2 ul li:nth-child(2) {
animation-delay: .3s;
}
#menu .menu2 ul li:nth-child(3) {
animation-delay: .6s;
}
#menu .menu2 ul li:nth-child(4) {
animation-delay: .9s;
}
#menu .menu2 ul li:nth-child(5) {
animation-delay: 1.2s;
}
<div class="menu" id="menu">
<i>fas</i>
<input type="checkbox" id="sm-menu">
<div class="sm-menu"><label for="sm-menu"><i>fa</i>fas</label></div>
<nav class="menu2">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</nav>
</div>
The problem is in CSS specificity.
This rule's selector
#menu #sm-menu:checked~.menu2 li {
animation: menu 1.5s;
animation-fill-mode: forwards;
}
is stronger than this
#menu .menu2 ul li:nth-child(2) {
animation-delay: .3s;
}
so it overrides it, and using the shorthand animation property overrides animation-delay in the following rules.
You have two solutions:
- The better one: make the rules below stronger like this (a refined version of your CSS):
#sm-menu:checked~.menu2 li {
animation: menu 1.5s;
animation-fill-mode: forwards;
}
#keyframes menu {
from {
transform: translateY(0px);
}
to {
transform: translateY(300px);
}
}
#menu .menu2 li:nth-child(2) {
animation-delay: .3s;
}
#menu .menu2 ul li:nth-child(3) {
animation-delay: .6s;
}
#menu .menu2 ul li:nth-child(4) {
animation-delay: .9s;
}
#menu .menu2 ul li:nth-child(5) {
animation-delay: 1.2s;
}
The second rough one is to use the !important rule which is an exception that overrides any other selector like this.
Note: It's always best to use as succinct selectors as you can.
I am trying to show one word at a time using the Li entries in a UL. The cycle is achieved with a CSS3 animation. I can show the words in sequence but not sure how hide the current word before the next one comes in:
#list {position:relative}
#list li {
animation: showWord 2.5s linear infinite 0s;
position:absolute;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 0.5s;
}
#list li:nth-child(3) {
animation-delay: 1s;
}
#list li:nth-child(4) {
animation-delay: 1.5s;
}
#list li:nth-child(5) {
animation-delay: 2s;
}
#keyframes showWord {
from,
49.9% {
opacity: 1;
}
50%,
to {
opacity: 0;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Nope
There is an animation-delay property, but that won't help us here. That delays the start of the animation, but after it's started it runs continuously.
#Solution: Keyframes with No Changes
You'll need to do a little mental math:
I want the animation to run for 10 seconds.
~ plus ~
I want the animation to delay for 2 seconds in between iterations.
~ equals ~
10 total seconds
So when you call the keyframe animation, you use the total seconds,
and the delay takes 2 seconds more each iteration:
#list {position:relative}
#list li {
animation: showWord 10s linear infinite 0s;
position:absolute;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 2s;
}
#list li:nth-child(3) {
animation-delay: 4s;
}
#list li:nth-child(4) {
animation-delay: 6s;
}
#list li:nth-child(5) {
animation-delay: 8s;
}
#keyframes showWord {
20%, 100% {
opacity: 0;
}
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
Hope it helps you
Just remove the position: absolute line
#list {position:relative}
#list li {
animation: showWord 2.5s linear infinite 0s;
opacity:0;
}
#list li:nth-child(2) {
animation-delay: 0.5s;
}
#list li:nth-child(3) {
animation-delay: 1s;
}
#list li:nth-child(4) {
animation-delay: 1.5s;
}
#list li:nth-child(5) {
animation-delay: 2s;
}
#keyframes showWord {
from,
49.9% {
opacity: 1;
}
50%,
to {
opacity: 0;
}
}
/* demo stylin' */
* {
list-style-type:none;
font-size:30px;
font-family:courier
}
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
I would like to add a FadeIn with CSS on #loader before my animation but it doesn't work.
You can test it here : http://codepen.io/AntoinePlu/pen/yLvdi
Any idea why ?
There is my HTML :
<div id="wrapper">
<ul id="loader">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
And here my CSS :
body{background-color:#39414D;}
#wrapper {
margin: 5% auto;
display:block;
width:300px;
}
#loader{
margin: auto;
width:100px;
height:100px;
list-style:none;
}
#loader li{
background-color:#ffffff;
width:8px;
height:40px;
float:left;
margin-right:6px;
border-radius: 8px;
-webkit-animation: fadein 4s;
}
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
#-webkit-keyframes insights {
0%{
height: 10px;
margin-top: 90px;
}
50%{
height: 50px;
margin-top: 50px;
}
100%{
height: 10px;
margin-top: 90px;
}
}
#loader li:nth-child(1){
-webkit-animation: insights 1s ease-in-out infinite -0.8s;
}
#loader li:nth-child(2){
-webkit-animation: insights 1s ease-in-out infinite -0.6s;
}
#loader li:nth-child(3){
-webkit-animation: insights 1s ease-in-out infinite -0.4s;
}
#loader li:nth-child(4){
-webkit-animation: insights 1s ease-in-out infinite -0.2s;
}
#loader li:nth-child(5){
-webkit-animation: insights 1s ease-in-out infinite 0;
}
Thanks for you answer!
instead of #-webkit-keyframes 'fadein' and #-webkit-keyframes 'insights' write
#-webkit-keyframes fadein and #-webkit-keyframes insights
wrong syntx, no need for '' in your code
http://codepen.io/anon/pen/xjuyn
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 }