intromations
HTML
<!---for pro standard, change the animation id to any element id you want the animation to play on. for example change #slidein to #container01 or #image01.--->
<style>
#slidein {
animation: slide 1s ease;
}
#slidefromright {
animation: slideright 1s ease;
}
#rotate2 {
animation: bigate 1s ease;
transform-origin: center;
width: fit-content;
}
#rotate1 {
animation: smallrotate 1s ease;
transform-origin: center;
width: fit-content;
}
#blur {
animation: blur 1s ease;
}
@keyframes slide {
from {
transform: translateX(-5em);
}
to {
transform: translateX(0);
}
}
@keyframes slideright {
from {
transform: translateX(5em);
}
to {
transform: translateX(0);
}
}
@keyframes smallrotate {
from {
transform: scale(.5) rotate(50deg);
}
to {
transform: scale(1) rotate(0);
}
}
@keyframes bigate {
from {
transform: scale(2) rotate(-50deg);
}
to {
transform: scale(1) rotate(0);
}
}
@keyframes blur {
from {
filter: blur(50px);
}
to {
filter: blur(0);
}
}
</style>
<div id="slidein">
slide in</div>
<div id="slidefromright">
slide from right </div>
<div id="rotate1">
rotate
</div>
<div id="rotate2">
rotate 2
</div>
<div id="blur">blur</div>