UPDATE – Halloween CSS Effects
Say hello to “Shiver”, a Halloween CSS effect that is definitely not ripped from a popular cult cinema streaming service. I added it to the the CSS Animation Archive project in the spirit of the season.
Simple Halloween CSS
Boyfriend and I have been pounding Giallo films on Shudder for the past two weeks, and I couldn’t get over the little tremble that the navigation links do when you hover over them. The CSS for this is so simple I was able to replicate it blind without inspecting the site. The keyframe animation simply juggles the element up, down, right, and left by 1 pixel every .05 seconds.
.shiver {
animation: shiver .05s infinite;
position: relative;
top: 0;
}
@keyframes shiver {
0% {
transform: translateY(-1px) translateX(-1px);
}
100% {
transform: translateY(1px) translateX(1px);
}
}
The demo includes the original hover-activated version of the effect as well in the Rollovers section.
.shiver-hvr {
position: relative;
top: 0;
}
.shiver-hvr:hover {
animation: shiver .05s infinite;
}
@keyframes shiver {
0% {
transform: translateY(-1px) translateX(-1px);
}
100% {
transform: translateY(1px) translateX(1px);
}
}
Happy Halloween!