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
2 months ago

Recent Posts

Setting Up Apache and MySQL on Your Local Machine

This guide provides a detailed walkthrough of installing and configuring an Apache web server and…

3 weeks ago

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…

1 month 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…

1 month 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…

1 month ago

Comprehensive guide on building a URL shortening script

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

1 month 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,…

1 month ago