Css

CSS animation 10 examples

CSS animations allow you to create smooth transitions between styles over a specified duration. Below, I will provide a detailed explanation of 10 different CSS animation examples.

Basic CSS Animation Concepts

Before diving into examples, here are some fundamental concepts:

  • Keyframes: Define the styles at various points in the animation. Use the @keyframes rule.
  • Animation Properties: Use properties like animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-fill-mode.

Example 1: Simple Fade In

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .fade-in {
            opacity: 0;
            animation: fadeIn 2s forwards;
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="fade-in">Hello, World!</div>
</body>
</html>

Example 2: Bounce Effect

<style>
    .bounce {
        animation: bounce 1s infinite;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-30px);
        }
        60% {
            transform: translateY(-15px);
        }
    }
</style>
<div class="bounce">Bounce Me!</div>

Example 3: Spin Animation

<style>
    .spin {
        display: inline-block;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>
<div class="spin">šŸ”„</div>

Example 4: Slide In from Left

<style>
    .slide-in {
        position: relative;
        animation: slideIn 0.5s forwards;
    }

    @keyframes slideIn {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }
</style>
<div class="slide-in">Slide In!</div>

Example 5: Pulsing Effect

<style>
    .pulse {
        display: inline-block;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
    }
</style>
<div class="pulse">Pulse!</div>

Example 6: Color Change Animation

<style>
    .color-change {
        animation: colorChange 3s infinite;
    }

    @keyframes colorChange {
        0% {
            color: red;
        }
        50% {
            color: blue;
        }
        100% {
            color: green;
        }
    }
</style>
<div class="color-change">Color Change!</div>

Example 7: Rotate on Hover

<style>
    .rotate {
        display: inline-block;
        transition: transform 0.5s;
    }

    .rotate:hover {
        transform: rotate(45deg);
    }
</style>
<div class="rotate">Hover Me!</div>

Example 8: Shake Animation

<style>
    .shake {
        animation: shake 0.5s;
    }

    @keyframes shake {
        0%, 100% {
            transform: translateX(0);
        }
        25% {
            transform: translateX(-5px);
        }
        75% {
            transform: translateX(5px);
        }
    }
</style>
<div class="shake">Shake Me!</div>

Example 9: Zoom In Effect

<style>
    .zoom-in {
        animation: zoomIn 0.5s forwards;
    }

    @keyframes zoomIn {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
</style>
<div class="zoom-in">Zoom In!</div>

Example 10: Flip Animation

<style>
    .flip {
        display: inline-block;
        perspective: 1000px;
    }

    .flip:active .card {
        animation: flip 0.5s forwards;
    }

    @keyframes flip {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(180deg);
        }
    }

    .card {
        width: 100px;
        height: 100px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
    }
</style>
<div class="flip">
    <div class="card">Flip Me!</div>
</div>

These examples show various ways to implement CSS animations, from simple fades and bounces to flips and spins. You can customize these animations further by adjusting the duration, timing functions, and keyframe properties to suit your design needs. By using CSS animations thoughtfully, you can create dynamic and engaging user experiences on your websites.

Victoria

Im just a girl who hanging around with her friends ;)

Leave a Comment
Share
Published by
Victoria
1 month ago

Recent Posts

Building Your Next Project with wp-scripts: A Comprehensive Guide

WordPress development has evolved significantly, and modern tooling plays a crucial role in creating efficient…

6 days ago

Script for automatically informing search engines about new content on website

I. Project Overview The goal is to automate the process of notifying search engines (like…

2 weeks ago

Creating an XML sitemap script with PHP, designed for automated updates via CRON

1. Database Structure (MySQL) We'll need a database table to store information about our website's…

2 weeks ago

Comprehensive guide on building a URL shortening script

This explanation aims to provide a solid foundation for understanding the process and implementing your…

2 weeks ago

Guide on building a real-time website chat script

Okay, here's a comprehensive guide on building a real-time website chat script using PHP, HTML,…

2 weeks ago

Comprehensive guide on creating a simple website analytics system

Comprehensive guide on creating a simple website analytics system using PHP, HTML, CSS, JavaScript, and…

2 weeks ago