Animationer
![Animation med Dynamic island på iPhone 14 Pro Animation med Dynamic island på iPhone 14 Pro](https://cdn.vox-cdn.com/uploads/chorus_asset/file/24002970/notch_animation.gif)
Typer
- gif-animationer
Filändelse
.gif
![Animation Animation](https://public-assets.envato-static.com/assets/common/50x-page/50x-image-616d02819eb978d9f07cd61de396b816.gif)
Förkortningar
- RAF - requestAnimationFrame
- FPS - frames per second
![Ikon med logotyp för Gartic phone Ikon med logotyp för Gartic phone](https://pbs.twimg.com/profile_images/1362150282809982981/gwYhEEkq_400x400.jpg)
Applikation
- FlipaClip
- Gartic phone
![Logotyp för Gartic phone Logotyp för Gartic phone](https://garticphone.com/images/thumb.png)
![Logotyp för Gartic phone Logotyp för Gartic phone](https://www.faylib.org/images/events/faylib/gartic_phone.png)
![Animation av Pacman Animation av Pacman](https://www.adweek.com/wp-content/uploads/2017/12/pacman-PAGE-2017.gif)
Spel
- Gartic phone
- Pacman
![Logotyp för GIPHY Logotyp för GIPHY](https://hellotars.com/wp-content/uploads/2017/05/giphy-android-app.jpg)
![Logotyp för GIPHY Logotyp för GIPHY](https://media.giphy.com/media/3o6gbbuLW76jkt8vIc/giphy.gif)
![Ikon med logotyp för GIPHY Ikon med logotyp för GIPHY](https://giphy.com/static/img/giphy_logo_square_social.png)
![Ikon med logotyp för tenor Ikon med logotyp för tenor](https://tenor.com/assets/img/tenor-app-icon.png)
Tjänster
![CSS 3 logotyp CSS 3 logotyp](/image/css.png)
![Scalable Vector Graphics Scalable Vector Graphics](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/SVG_Logo.svg/2000px-SVG_Logo.svg.png)
Programmeringsspråk
Keyframes i CSS
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Regel för CSS
animation: rotate 2s infinite linear;
Fler regler för CSS
animation-play-state: paused
animation-play-state: running
animation-delay: 18s
Inställningar för animation med hjälp av CSS
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
Cubic-bezier i CSS
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: ease-in;
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
transition-timing-function: ease-out;
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
Request Animation Frame med JavaScript
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame
}());
![Logotyp för LottieFiles Logotyp för LottieFiles](/img/lottiefiles.jpeg)
Ramverk för animationer med JavaScript
![Logotyp för SKYDANCE ANIMATION Logotyp för SKYDANCE ANIMATION](https://upload.wikimedia.org/wikipedia/commons/6/60/Skydance_Animation_New_Logo.png)
Företag
Github
![Exempel på cinemagraph Exempel på cinemagraph](https://assets.awwwards.com/awards/images/2011/07/gif-cinematic09.gif)
Länkar
![Animation som föreställer en 7-segmentsdisplay Animation som föreställer en 7-segmentsdisplay](https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Seven_segment_display-animated.gif/191px-Seven_segment_display-animated.gif)
Externa länkar
- Happens in adops.com
- Greensock.com Tween lite
- Webkit.org Blog 3D transforms
- http://stackoverflow.com/questions/28122639/how-to-stop-animation-at-the-last-frame
- Icons8.com Animated icons
![Animation med Mr. Burns som säger Excellent Animation med Mr. Burns som säger Excellent](https://s3.amazonaws.com/static.mememypic.com/uploads/user_photos/2020/08/06/500-1596760478.2616.gif)
![Stich animation Stich animation](http://s6.favim.com/orig/151205/disney-gif-lilo-y-stich-movie-Favim.com-3707246.gif)
![Animerad bild på jorden Animerad bild på jorden](https://cdn.dribbble.com/users/89254/screenshots/3428562/low-poly-earth10.gif)
![Animerad bild på rymden Animerad bild på rymden](https://static1.squarespace.com/static/56a958148b38d449c8ef55be/t/58a1c15ac534a53dfb529149/1486995820869/TGIF_030_Thumbnail.gif?format=2500w)
![Animation av fraktal Animation av fraktal](https://i.kinja-img.com/gawker-media/image/upload/seyloqgt1mz3qrlpynih.gif)
![Tredimensionell animation av logotyp för Smoersex Tredimensionell animation av logotyp för Smoersex](https://smoersex.bthstudent.se/wp-content/blogs.dir/20/files/sites/11/2023/07/smoersex-bunny-animated-1.gif)
![Animerad tjej som snurrar, men åt vilket håll? Animerad tjej som snurrar, men åt vilket håll?](https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Spinning_Dancer.gif/250px-Spinning_Dancer.gif)