The rotating animations trend is an essential element in cool website ensembles. Many companies are making use of this trend, wherein the visitor gets to watch a new video every time he visits the website or refreshes the web page.
Rotating Image:
Image rotation is a common image processing routine with applications in matching, alignment and other image-based algorithms. The inputs of an image rotation routine are an image, the rotation angle , and a point about which the rotation is performed.
[html]
#test {
width: 11px;
height: 14px;
background: url(‘img_url’);
}
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
}
<HTML>
<img id=”loading” src=”http://www.vitorazevedo.net/external_files/loading_small.png“>
CSS
body {
text-align: center;
padding: 100px 0 0 0;
color: #fff;
background: #1d1f20;
}
#loading {
-webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
[/html]
Rotating Logo icon
Animated logos have been in trend for the past several years, and they are at the top of web animation trends today. By combining various visual effects, motion designers create different types of logo animation: rotate logo, transform logo, hide and reveal logo, expand logo, hard-draw animated logo, 3D animation logo, etc.
[html]
<div class="fa-3x">
<div class="fa-3x">
<i class="fa-solid fa-snowboarding"></i>
<i class="fa-solid fa-snowboarding fa-rotate-90"></i>
<i class="fa-solid fa-snowboarding fa-rotate-180"></i>
<i class="fa-solid fa-snowboarding fa-rotate-270"></i>
<i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
<i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
<i class="fa-solid fa-snowboarding fa-flip-both"></i>
</div>
[/html]
Rotating Text
Moving text is an animation technique that mixes typography and motion. Do you want to try how it will look on your website? Go ahead! Today, many notable brands use kinetic typography in web design to add a sense of speed and innovation to their online looks.
CSS
[html]
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="rotating" style="width: 100px; height: 100px; line-height: 100px; text-align: center;">Rotate</div>
[/html]
Technologies for creating web animations
So, you already know the most amazing and popular website animation styles and types. Now, it’s time to learn how you can add them to a website. Once the designers have chosen the animation, they forward it to the front-end developers – the programming wizards, who must place it on the site. Here we will consider the best technologies and frameworks used for web animations.
CSS
The first thing is CSS. It support front-end developers to transition between different states using keyframes.
This type of animation is lightweight, high-performance, and requires no external libraries to implement.
SVG
Do you know what the abbreviation SVG means? It is scalable vector graphics. You can also understand from the name that SVG is a perfect solution for creating easily scalable animation. It looks great on the website even if you zoom in on it because SVG doesn’t have pixel restrictions.
Canvas
Canvas is great for implementing complex animations and rendering large-scale scenes. It is a pixel-based solution that enables you to create complex images with different colors, shades and motions. And what is most important – it does not affect the animation performance.
Webgl
WebGL is commonly used to generate sophisticated animation effects and 3D renderings. The most impressive fact about WebGL is the fact that it can render animation at 60 frames/sec (just imagine!) For WebGL, developers must also use Canvas, but it’s a fairly complicated process.
Conclusion
Whether big or small, animations can enhance the experience users receive when they visit your website. Animations make a website more engaging and interactive, but the best method is, ultimately, to keep your animations as simple as possible.