Amit Dhamu

Writes Code

CSS3 Animation

// Define your animation at 0%, 50% and 100%
// This animation will animate from 500px to 800px and back to 500px
@keyframes "TestAnimation" {
    0% { width: 500px; }
    50% { width: 800px; }
    100% { width: 500px; }
}
@-moz-keyframes TestAnimation {
    0% { width: 500px; }
    50% { width: 800px; }
    100% { width: 500px; }
}
@-webkit-keyframes "TestAnimation" {
    0% { width: 500px; }
    50% { width: 800px; }
    100% { width: 500px; }
}
@-ms-keyframes "TestAnimation" {
    0%  { width: 500px; }
    50% { width: 800px; }
    100% { width: 500px; }
}
@-o-keyframes "TestAnimation" {
    0% { width: 500px; }
    50% { width: 800px; }
    100% { width: 500px; }
}

// Your element which you are going to animate
.animate-me {
    width: 500px;
    height: 200px;
    background-color: #fe7000;
    position: absolute;
}

// Attach your animation to your chosen element on hover
// Animation will take 5 seconds and loop infinitely while hovering
.animate-me:hover {
    -webkit-animation: TestAnimation 5s ease-in-out infinite;
    -moz-animation: TestAnimation 5s ease-in-out infinite;
    -ms-animation: TestAnimation 5s ease-in-out infinite;
    -o-animation: TestAnimation 5s ease-in-out infinite;
    animation: TestAnimation 5s ease-in-out infinite;
}


animation / css3 / css

← CSS3 Transitions Loop Between Date Range →