Pure CSS Text Reveal from Smoke Animation Effect 💨 | CSS Animation

by • 2 min read

Hello, Guys Today we create awesome Text Reveal animation with Colorful Smoke Animation Effect. This Animation is cool for your website and we use only HTML5 and CSS3. If you find awesome animation then you are in the right place. Here is the code of Pure CSS Text Reveal from Smoke Animation Effect 💨.


Pure CSS Text Reveal from Smoke Animation Effect 💨 | CSS Animation

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Smoke</title>
</head>
<body>
    <section>
        <video src="smoke.mp4" autoplay muted></video>
        <h1>
            <span>C</span>
            <span>o</span>
            <span>d</span>
            <span>e</span>
            <span>S</span>
            <span>n</span>
            <span>a</span>
            <span>i</span>
            <span>l</span>
        </h1>
    </section>
</body>
</html>

Style.css

body{
    margin:0;
    padding:0;
}
section{
    height: 100vh;
    background: #000;
    overflow: hidden;

}
section::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #f00,#f00,#0f0,#0ff,#ff0,#0ff);
    mix-blend-mode: color;
    pointer-events: none;
}
video{
    object-fit: cover;
}
h1{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 5em;
    font-family:sans-serif;
    text-transform: uppercase;
}
h1 span{
    display: inline-block;
    animation: animate 1s linear forwards;
}
@keyframes animate{
    0%{
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(10px)
    }
    100%{
        opacity: 1;
        transform: rotateY(0deg);
        filter:blur(0)
    }
}
h1 span:nth-child(1){
    color:#186aa0;
    opacity: 0;
    animation-delay: 2s;
}
h1 span:nth-child(2){
    opacity: 0;
    animation-delay: 2.5s;
}
h1 span:nth-child(3){
    opacity: 0;
    animation-delay: 2.75s;
}
h1 span:nth-child(4){
    opacity: 0;
    animation-delay: 3s;
}
h1 span:nth-child(5){
    color:#186aa0;
    opacity: 0;
    animation-delay: 3.5s;
}
h1 span:nth-child(6){
    opacity: 0;
    animation-delay: 3.75s;
}
h1 span:nth-child(7){
    opacity: 0;
    animation-delay: 4s;
}
h1 span:nth-child(8){
    opacity: 0;
    animation-delay: 4.5s;
}
h1 span:nth-child(9){
    opacity: 0;
    animation-delay: 4.75s;
}

Output

css text reveal from smoke animation, pure css animation, colorful smoke animation using css, smoke animation css, text animation css

You need to a smoke.mp4. Download video and source code of this animation here:Download

I hope you like this animation. Now explore this animation and share this code with your friends.

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

3 thoughts on “Pure CSS Text Reveal from Smoke Animation Effect 💨 | CSS Animation”

Leave a Comment