November 18, 2020 in Tips and Tricks
animation media kit for css
code for css file
div.at-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.at-item {
color: #3079ed;
animation-name: focus-in-contract;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
}
@keyframes focus-in-contract {
0%{
letter-spacing: 1em;
filter: blur(12px);
opacity: 0;
}
100%{
filter: blur(0);
opacity: 1;
}
}
CSS properties allows us to change style of HTML element smoothly. CSS3 introduce two keywords for animation:
@keyframe and animation. Both properties can bind with any HTML element like text, div, span etc.
(1) @keyframe has a collection of CSS style properties. It is like a timeline of CSS styles.
(2) animation property can control keyframes execution sequence.
Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.
animation properties
name: name of the animation
duration: total running time of animation ( in seconds or milliseconds )
timing-function: change the running speed ( slow start to fast end, fast to slow etc )
delay: wait few seconds or milliseconds before animation start
iteration-count: how many time repeat loop
direction: run animation in normal or reverse direction.
fill-mode: any other style apply to element before animation start or after animation end
code for html file
<div class='at-container'>
<h1 class='at-item'>Animation
</h1>
</div>
