css3
-
Finally fixed the flicker
Since developing my site’s theme there has always been this annoying browser bug causing a ‘flicker’ whilst rolling over any element with a css3 transition. I’ve finally found a decent workaround which involves adding 1 line of css: -webkit-transform: translateZ(0); This triggers the GPU to do the animation rather than the CPU and has fixed…
-
CSS3 scale and rotate animation (webkit only)
Have you tried hovering over my logo (up top) in webkit? The animation is a nice effect and is really easy to implement as a progressive enhancement. #logo a:hover { -webkit-animation-name: rotateThis; -webkit-animation-duration:2s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function:ease-in-out; } @-webkit-keyframes rotateThis { 0% { -webkit-transform:scale(1) rotate(0deg); } 10% { -webkit-transform:scale(1.1) rotate(0deg); } 100% {-webkit-transform:scale(1.1) rotate(360deg); } }…