No problem.
The delay property name isn’t correct as well, it should be animation-delay
.
Not sure you really need the delay anyway, but if you do use it, it would need to be a very low value, like 200ms (ms = milliseconds).
No problem.
The delay property name isn’t correct as well, it should be animation-delay
.
Not sure you really need the delay anyway, but if you do use it, it would need to be a very low value, like 200ms (ms = milliseconds).
I did that, still nothing.
Now, you did the opposite. You gave the right animation the same values as the left.
The right should be positive values for 0% to 50%, not negative.
@keyframes blur_right_anim {
0% {
transform: rotateZ(0deg);
opacity: 0;
}
25% {
transform: rotateZ(7deg);
opacity: 0.75;
}
50% {
transform: rotateZ(14deg);
opacity: 0.1;
}
62.5% {
transform: rotateZ(-14deg);
opacity: 0.25;
}
75% {
transform: rotateZ(-7deg);
opacity: 0.25;
}
100% {
transform: rotateZ(0deg);
opacity: 0.1;
}
}
@keyframes blur_left_anim {
0% {
transform: rotateZ(0deg);
opacity: 0;
}
25% {
transform: rotateZ(-7deg);
opacity: 0.75;
}
50% {
transform: rotateZ(-14deg);
opacity: 0.1;
}
62.5% {
transform: rotateZ(14deg);
opacity: 0.25;
}
75% {
transform: rotateZ(7deg);
opacity: 0.25;
}
100% {
transform: rotateZ(0deg);
opacity: 0.1;
}
}