CSS-Animations
- Why does animation exist
- What is an animation
- How do we use animations
Sponsored by:
Sponsored by:
Samil Vargas
Payment System Developer at @Wirecard
Sponsored by:
CAUTION
The content provided on this presentation has only been proved with Chrome +65. Any other browser or Chrome version has no warranty to work.
Sponsored by:
Why Does animation exist ?
"Process of giving movement sensation to an unanimated object"
Sponsored by:
Sponsored by:
But why should I care ?
- The idea is to create interfaces just as real objects on the real life.
- Make software experience be as comfortable as possible.
Sponsored by:
How do I make an animation ?
.mustage {
width: 180px;
height: 180px;
left: 100px;
position: absolute;
border-radius: 50%;
box-shadow:
150px 240px 0 0 currentColor,
300px 240px 0 0 currentColor;
}
.mustage::before {
content: '';
position: absolute;
left: 30px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
}
.mustage::after {
content: '';
position: absolute;
left: 390px;
top: 120px;
width: 210px;
height: 120px;
border-bottom: solid 180px currentColor;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin: left 210px;
}
Sponsored by:
<div class="mustage"></div>Sponsored by:
How to animate a HTML element ?
.mustage {
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
- 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
Sponsored by:
@keyframes
These specify what the animation does.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}@keyframes shakeLeft {
0% {
transform: rotate(-50deg);
}
50% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-50deg);
}
}Sponsored by:
Animation Result
Animations
By Samil Vargas
