Pitch your project

Random text






Blogs

0    
By admin Category Uncategorized, Posted January 25th, 2016
CSS animations

Everybody has at least once seen a moving element on a website. We call these moving elements animations. A lot of animations can be made with CSS3 and HTML5. A CSS animation lets an element gradually change color, size or location on the page. There is no limit to the amount of animations you can put on one element. In this blog I’ll explain to you how to make a basic css-animation.

To start, you first need to create a HTML5 element, like a button for example. The next thing is the CSS animation. To create an animation you need to tell what the element will look like and where it’s positioned on what moment. Such a moment is called a keyframe.

Below you see the code for an example animation. In this animation the background color of the button will change in 4 seconds.

/* The animation code */
@keyframes example {
    from {background-color: black;}
    to {background-color: white;}
}

/* The element to apply the animation to */
button {
    width: 100px;
    height: 100px;
    background-color: black;
    animation-name: example;
    animation-duration: 4s;
}

It’s important to always remember to set the animation duration because this is 0 by default. When you don’t set an animation duration the animation will just not happen.

The words from and to mean from 0% to 100%. In case you want multiple things to happen in one animation you can set multiple keyframes, for example:

/* The animation code */
@keyframes example {
    0%   {background-color: black;}
    25%  {background-color: green;}
    50%  {background-color: red;}
    100% {background-color: white;}
}

Even though this animation only changes the background color of the element, it’s also possible to change the location. The example below will show you how to change both the background color and the location of the element. Also the full animation is delayed for 2 seconds, in other words it will take 2 seconds before the animation starts.

/* The animation code */

@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

div {

    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}

In addition to animation-duration and animation-delay there is also something to set the amount of times an animation should run. This is by default 0, in case you want to run the animation for 4 times you simply add:

animation-iteration-count: 4;

If you want to run the animation for infinity you use:

animation-iteration-count: infinite;

You can also specify the speed curve of the animation. Below you see a list with the different options available:

  • ease – specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear – specifies an animation with the same speed from start to end
  • ease-in – specifies an animation with a slow start
  • ease-out – specifies an animation with a slow end
  • ease-in-out – specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) – lets you define your own values in a cubic-bezier function

You set the speed curve of the animation by adding:

animation-timing-function: ease;

Posted by Amanda de Rijk

Leave a Reply

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