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 fixedContinue reading “Finally fixed the flicker”

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); } }Continue reading “CSS3 scale and rotate animation (webkit only)”