Css animations
Here a codePen with cool animations: https://codepen.io/DevLorenzo/pen/ExgpvJM
learn css animation
Read this helpful, short and straightforward article to learn CSS animation perfectly. https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd
animation css
animation: name duration timing-function delay iteration-count direction fill-mode play-state; /* name: name of the animation duration: amount of time it takes to complete ex: 2s timing-function: Specifies the speed curve of the animation ex: linear, ease, etc. delay:Specifies a delay before the animation will start iteration-count: how many times to play the animation, ex: initial direction: Specifies whether or not the animation should play in reverse on alternate cycles ex:forwards, backwards, alternate, alternate-reverse fill-mode: Specifies what values are applied by the animation outside the time it is executing ex: none, forwards, backwards, both animation-play-state: Specifies whether the animation is running or paused */
CSS animation
#anim { animation-name: colorful; animation-duration: 3s; } @keyframes colorful { 0% { background-color: blue; } 100% { background-color: yellow; } }
Source: www.freecodecamp.org
animations css
window.addEventListener('scroll', () => { document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); }, false);
css animation
@keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } #animate-area { width: 200px; height: 200px; background-image: url(http://placekitten.com/400/200); background-position: 0px 0px; background-repeat: repeat-x; animation: animatedBackground 10s linear infinite alternate; }
Source: stackoverflow.com