I'm fairly new to learning CSS and have been playing with some animation and things.
In my CSS, I have the same thing repeating again and again, but with a difference of 0.1. It's animation-delay: 0.1s, this increases in increments of 0.1s.
Do I have to type the code like I have in my example. Or is there a way I can tell it to increase by 0.1 for the next class? Or should I have done this differently?
The reason is that I wanted to create about 50 of these squares to see what it looks like. I don't really want to type out 50 classes and then change the increments to 0.2 for each class, I would have to change it 50 times. I'm sure there's a better way to do this?
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
.first, .second, .third, .fourth, .fifth, .sixth, .seventh, .eighth, .ninth, .tenth {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
}
.second {
animation-delay: 0.1s;
}
.third {
animation-delay: 0.2s;
}
.fourth {
animation-delay: 0.3s;
}
.fifth {
animation-delay: 0.4s;
}
.sixth {
animation-delay: 0.5s;
}
.seventh {
animation-delay: 0.6s;
}
.eighth {
animation-delay: 0.7s;
}
.ninth {
animation-delay: 0.8s;
}
.tenth {
animation-delay: 0.9s;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="fourth"></div>
<div class="fifth"></div>
<div class="sixth"></div>
<div class="seventh"></div>
<div class="eighth"></div>
<div class="ninth"></div>
<div class="tenth"></div>
</body>
</html>
Like someone suggested earlier, javascript is the best option:
If you do happen to learn jquery first this is a simple solution to your problem written in jquery (although its mostly plain ol' javascript).
// CHANGE THE NUMBER 4 IN THE NEXT LINE TO THE NUMBERS OF DIVS YOU HAVE
for (var i = 1; i <= 4; i++) {
var div = ".div"+i;
var value = "."+i+"s";
$(div).css("animation-delay", value);
}
#keyframes mycolour {
from {height: 100px;}
to {height: 150px;}
}
div {
width: 100px;
height: 100px;
float: left;
animation-name: mycolour;
animation-duration: 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
background-color: red;
animation-delay: .1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
Related
I would like to build a background animation when a website is opened. I want to create a grid on the whole website, but I also want it to build gradually. Does any body have an idea how I could build this grid gradually?
This is something I wrote for an animation of a single line:
div{
height:0px;
width:1px;
border-bottom:1px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
#keyframes increase {
100% {
width: 300px;
}
}
The problem is I want to do this animation in the background, how can I achieve this?
Another option is to use a rectangle that repeats itself in the background. Is there a way to animate this?(rectangles appearing gradually)
Background image:
Without sample code, can't do much. Here is a CSS approach to do a Grid-like reveal. You could crop your image in squares and use as separate background for each of the boxes, or use one image and set the background-position of each box.
html,
body {
margin: 0;
padding: 0;
}
.grid {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.block {
border: solid 1px #252525;
opacity: 0;
visibility: hidden;
animation: reveal 1s forwards ease;
}
#keyframes reveal {
100% {
opacity: 1;
visibility: visible;
}
}
.block:nth-child(1) {
animation-delay: 50ms;
}
.block:nth-child(2) {
animation-delay: 100ms;
}
.block:nth-child(3) {
animation-delay: 150ms;
}
.block:nth-child(4) {
animation-delay: 200ms;
}
.block:nth-child(5) {
animation-delay: 250ms;
}
.block:nth-child(6) {
animation-delay: 300ms;
}
.block:nth-child(7) {
animation-delay: 350ms;
}
.block:nth-child(8) {
animation-delay: 400ms;
}
.block:nth-child(9) {
animation-delay: 450ms;
}
<div class="grid">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I want to have two animations applied to an element. These animations will execute sequentially infinite number of times. I want to use pure CSS without JS.
#keyframes show {
from,
to {
z-index: 100;
}
}
#keyframes wait {
from,
to {
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 1s show infinite, 1s wait infinite;
}
.block-a {
background-color: red;
animation-delay: 0s, 1s;
}
.block-b {
background-color: purple;
animation-delay: 1s, 2s;
}
.block-c {
background-color: yellow;
animation-delay: 2s, 3s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>
Here is my current solution on codepen: https://codepen.io/olafvolafka/pen/oNpPeqj
The issue is the animation stops after the last animation and doesn't repeat.
Here below you will see an implementation of A Haworth's Comment to enforce the z-index at the end of each animation iteration to return to the same value it was at the start (this case: -100).
Doing this is with the keyframe 50% setting the z-index at the front (100) . So that when each animation ends the properties are identical to when it began.
The animation is also set to cycle/repeat every 3 seconds rather than every 1 second as per your original code. This is that each iteration of the animation should run and complete before being called again; so 3 blocks means it runs for 3s. Each block having 1second as per your delay values in each blocks own class CSS code.
I have removed the wait animation because it simply didn't do anything. If you want an animation to wait there are various ways of doing this, not least with keyframes and animation-delay.
#keyframes show {
from {
z-index: -100;
}
50% {
z-index: 100;
}
to {
z-index: -100;
}
}
.block {
position: absolute;
z-index: -100;
width: 100px;
height: 100px;
border: 1px solid black;
animation: 3s show infinite;
}
.block-a {
background-color: red;
animation-delay: 0s;
}
.block-b {
background-color: purple;
animation-delay: 1s;
}
.block-c {
background-color: yellow;
animation-delay: 2s;
}
<div class="container">
<div class="block block-a">1</div>
<div class="block block-b">2</div>
<div class="block block-c">3</div>
</div>
I am wondering if there is a way in full CSS to reproduce the following animation (the tool-tip box that appears and disappears) and appears again.
I wanted it to be recursive
http://bourbon.io/
You can do this using animations properties (with a custom animation).
Example:
HTML
<div id="container">
<div id="animatediv">
</div>
</div>
CSS
#container {
background-color: yellow;
display: inline-block;
padding: 40px;
}
#animatediv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: hideshow;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes hideshow {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Here's a jsfiddle:
https://jsfiddle.net/fabio1983/j6jj9766/
You can also check this page for more informations:
https://www.w3schools.com/css/css3_animations.asp
Is it possible to run again css animateion without js?
#-webkit-keyframes aaa {
to {
background: red;
}
}
input:checked + div {
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: aaa;
-webkit-animation-duration: 1s;
}
div {
width: 100px;
height: 100px;
background:blue;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: aaa;
-webkit-animation-duration: 1s;
}
When checkbox is checked i want to run again my animation?
<input type="checkbox" />
<div></div>
enter link description here
I've been trying to solve your issue with just one keyframe declaration.
As DarkFalcon points out you can solve it by declaring two different keyframes and apply one for the :checked and the other for the initial state.
Code Snippet
#keyframes aaa {
to {
background: red;
}
}
#keyframes bbb {
to {
background: red;
}
}
input:checked + div {
animation-name: bbb;
}
div {
width: 100px;
height: 100px;
background:blue;
animation-fill-mode: forwards;
animation-name: aaa;
animation-duration: 1s;
}
<input type="checkbox" />
<div></div>
If I find another way around this, where you don't need two declared keyframes I'll update my answer.
I have a slideshow where pictures crossfade automatically in a loop. It is set so that 3 pictures are scrolling.
Demo in Codepen (http://codepen.io/lopis/pen/VYRoKE)
<section class="crossfade">
<article class="slide">
<img src="http://lorempixel.com/400/200/people" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/cats" alt="" />
</article>
<article class="slide">
<img src="http://lorempixel.com/400/200/sports" alt="" />
</article>
</section>
The CSS:
$slideDuration: 4; // seconds
$slideNum: 3;
#mixin loop($name, $duration, $delay) {
-webkit-animation: $name #{$duration}s #{$delay}s infinite;
-moz-animation: $name #{$duration}s #{$delay}s infinite;
animation: $name #{$duration}s #{$delay}s infinite;
}
#mixin slide() {
#for $i from 1 through $slideNum {
.slide:nth-child( #{$i} ) {
#include loop( crossfade, ($slideNum * $slideDuration), (($i - 1) * $slideDuration) );
}
}
}
#mixin keyframes() {
#-webkit-keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes crossfade {
0% {
opacity:1;
}
25% {
opacity:1;
}
33% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
}
.crossfade {
position: relative;
}
.slide {
position: absolute;
top: 0;
}
.slide:first-child {
position: static;
}
#include slide();
#include keyframes();
Is there a way to make an animation like this that would work with any number of slides using just CSS?
Edit: I understand that such dynamism is not intended in CSS but you can have some dynamic content, like by using calc(), etc.
Some libraries, as the one suggested in the comments, allow the use of mixins for this task. This is not what I'm looking for as it requires a rebuild of the source.
You can get this using only CSS, using a content responsive technique
Let's set a time for each slide of 2 seconds.
We need to set a staggered delay for every nth child of 2 seconds. That is easily acieved with nth-child.
Now, we need to increase the duration of the transition depending on the number of elements. Using this technique we achieve this easily.
The third issue is managing the fade-out. In the standard approach, that would involve changing the keyframes changing point, and it would be cumbersome. The trick to get this working with much less code, is to make a z-index movement in the animation itself. The elements are moving backward, and then we don't care about their opacity anymore
Example set only for 3 posible number of elements:
.container {
width: 100px;
height: 50px;
position: relative;
margin: 10px;
display: inline-block;
}
.element {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
animation: anim 6s infinite;
}
.element:nth-child(1) {
background-color: lightyellow;
animation-delay: 0s;
}
.element:nth-child(2) {
background-color: lightgreen;
animation-delay: 2s;
}
.element:nth-child(3) {
background-color: pink;
animation-delay: 4s;
}
.element:nth-child(4) {
background-color: lightblue;
animation-delay: 6s;
}
.element:nth-child(5) {
background-color: coral;
animation-delay: 8s;
}
.element:nth-child(6) {
background-color: aliceblue;
animation-delay: 10s;
}
.element:nth-child(7) {
background-color: burlywood;
animation-delay: 12s;
}
.element:nth-child(8) {
background-color: bisque;
animation-delay: 14s;
}
.element:nth-child(9) {
background-color: beige;
animation-delay: 16s;
}
.element:nth-last-child(3):first-child,
.element:nth-last-child(3):first-child ~ .element {
animation-duration: 6s;
}
.element:nth-last-child(6):first-child,
.element:nth-last-child(6):first-child ~ .element {
animation-duration: 12s;
}
.element:nth-last-child(9):first-child,
.element:nth-last-child(9):first-child ~ .element {
animation-duration: 18s;
}
#keyframes anim {
0% { opacity: 0; z-index: 100;}
15% { opacity: 1;}
50% { opacity: 1;}
100% { opacity: 0; z-index: 1;}
}
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
</div>
<div class="container">
<div class="element">ONE</div>
<div class="element">TWO</div>
<div class="element">THREE</div>
<div class="element">FOUR</div>
<div class="element">FIVE</div>
<div class="element">SIX</div>
<div class="element">SEVEN</div>
<div class="element">EIGHT</div>
<div class="element">NINE</div>
</div>