Press "Enter" to skip to content

CSS animations and transitions tutorial part two


CSS Animations and Keyframes

This is part two in the serie on CSS animations, part one is about transitions.
This part will focus more on animation and keyframes.

Keyframes syntax

@keyframes [name] {
from{
[styles];
}
to {
[styles];
}
}

Keyframes do not have any selectors on them. They are at the root of the page.
[name]is the name of the keyframe. This name will be used
to call the selector. Inside the keyframe declarations are two other declarations,
the start: from {...} and end: to {...}.

For Example:


@keyframes myframes {
from{
height: 200px;
background: orange;
}
to {
height: 400px;
background: pink;
}
}


Practice time


.box1 {
display: inline-block;
background: pink;
width: 200px;
height: 200px;
position: relative;
animation: myframes 4s ease-in-out 0s infinite;
}

@keyframes myframes{
0% { width: 200px; }
/*The 30 - 70% is a pauze in the animation*/
30%, 70% { width: 400px; }
100% { width: 600px; }
}

animation property

animation syntax


.element {
animation: [name] [duration] [timing-function] [delay]
[interation-count] [direction] [fill-mode] [play-state];
}

The animation property is inside the selector (as opposed to the keyframes who are at the root of the page) and the first value
of the animation property, [name], should match the keyframes perfectly.
The animation property is shorthand, all values have their own properties as well.

  • animation-name: myframes;
  • animation-duration: 4s;
  • animation-timing-function: ease-in-out;
  • animation-delay: 0s;
  • animation-iteration-count: infinite;
  • animation-direction: alternate;
  • animation-fill-mode: forwards;
  • animation-play-state: paused;

animation-delay: 0s; determines how many seconds delay there will be before the first iteration of the animations
will start. It does not create delays between iterations.

animation-iteration-count: infinite;. Can be a number or infinite. It controls how many iterations of the animation there will be.
Keep in mind that when animation-direction is set to alternate, both the regular and reverse motion count.
So an animation that you want to return to the original starting position should have an even animation-iteration-count value.

animation-direction: alternate;. Possible values for the direction are: normal, alternate, alternate-reverse and reverse.
alternate is good when you want to use a continous loop. Use everse and alternate-reverse if you want the end of the
animation to be the starting position.

animation-fill-mode: forwards;. When not using a infinite for the interation count there will be an end state to the animation.
The fill mode will determine the state of the element when the animation is over. Possible values are backwards, forwards both and none.

CLICK ME

To demonstrate the animation-play-state we added an extra class:
.is-paused { animation-play-state: paused; }
which we toggle using javascript.
var box2 = document.getElementsByClassName('box2');
box2[0].addEventListener('click', function(){this.classList.toggle('is-paused');});

When the box is clicked the class gets added to the box and the animation freezes. When clicked again it resumes where it left of.


To demonstrate that animations will run when an element is created (vs transitions, where only the end state is displayed) click anywhere on the page to create a new element.


var addcontent = document.getElementsByClassName("content-container");
addcontent[0].addEventListener('click', function(){
var newdiv = document.createElement('div');
newdiv.classList.add("box3");
this.appendChild(newdiv);
});

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *