DEV Community

loading...
Cover image for Smoke Animation Effect On Text By Using Html CSS

Smoke Animation Effect On Text By Using Html CSS

stackfindover profile image Stackfindover ・3 min read

Hello guys today we will learn How to make smoke animation effect on the text by using HTML CSS

Hello, Guys Today we create an awesome Text 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 Smoke Animation Effect On Text By Using Html CSS.

First, we need to create two files index.html and style.css then we need to do code for it.

Smoke Animation Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
    <title>Smoke</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
   <div class="smoke" >
        <ul>
            <li><img src="logo.png"></li>
            <li>S</li>
            <li>t</li>
            <li>a</li>
            <li>c</li>
            <li>k</li>
            <li>f</li>
            <li>i</li>
            <li>n</li>
            <li>d</li>
            <li>o</li>
            <li>v</li>
            <li>e</li>
            <li>r</li>
        </ul> 
        <div class="thankyousec">
            <div class="colmun-grid">
                <div class="logo-stack">
                    <img src="logo-stack.png">
                </div>
            </div>     
        </div>   
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Smoke Animation Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
    font-family: 'Roboto', sans-serif; 
} 
body {
    margin:0;
    padding:0;
    background: #000;
    height: 100vh;
}
.smoke {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.smoke ul {
    margin:0;
    padding:0;
    display:flex;
    align-items: center;  
    text-align: center;  
}

.smoke ul li {
    list-style:none;
    font-weight:bold;
    letter-spacing:10px;
    filter:blur(1px);
    color:#fff;
    font-size:6em;
    display: inline-block; 
}
.smoke ul:hover li {
    animation: smoke 2s linear forwards;
}
@keyframes smoke {
    0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 1;
        filter:blur(1px);
    }
    100% {
      transform: rotate(45deg) translateY(-200px);
        opacity: 0;
        filter:blur(20px);
    }
}
li > img {
    width: 100%;
} 
.smoke ul li:nth-child(1){
    align-items: center;
    display: flex;
    animation-delay:0s;
    width: 1.5em; 
    margin-right: 20px;
}
.smoke ul li:nth-child(2){
    animation-delay:.4s
}
.smoke ul li:nth-child(3){
    animation-delay:.8s
}
.smoke ul li:nth-child(4){
    animation-delay:1.2s
}
.smoke ul li:nth-child(5){
    animation-delay:1.6s
}
.smoke ul li:nth-child(6){
    animation-delay:2s
}
.smoke ul li:nth-child(7){
    animation-delay:2.4s
}
.smoke ul li:nth-child(8){
    animation-delay:2.8s
}
.smoke ul li:nth-child(9){
    animation-delay:3.2s
}
.smoke ul li:nth-child(10){
    animation-delay:3.6s
}
.smoke ul li:nth-child(11){
    animation-delay:4s
}
.smoke ul li:nth-child(12){
    animation-delay:4.4s
}
.smoke ul li:nth-child(13){
    animation-delay:4.8s
}
.smoke ul li:nth-child(14){
    animation-delay:5.2s
}
/******** Extra *************/
.smoke.thankyou {
    width: 100%;
}
.thankyousec {
    height: 0;
    opacity: 0;
    transition: opacity 1s; 
}
.thankyou .thankyousec {
    opacity: 1;
    height: auto;
}
.smoke.thankyou > ul {
    display: none;
}
.thankyousec  h1 {
    color: #fff;
    font-size: 65px;
    margin: 0;
    line-height: 75px;
}
.thankyousec  span {
    color: #fff;
    font-size: 30px;
}
.colmun-grid {
    display: grid;
    grid-template-columns: 150px auto;
    column-gap: 20px;
    align-items: center;
    justify-content: center; 
}
.logo-stack > img {
    width: 100%;
    background: #fff;
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Smoke Animation Effect On Text By Using Html CSS Output:

Discussion (3)

pic
Editor guide
Collapse
pini851 profile image
pini85

You should only use transform and opacity properties on @keyframes. Blur in particular takes too much in performance

Collapse
stackfindover profile image
Collapse
dennisfrijlink profile image
Dennis Frijlink

I agree with that. I don't recommend to use CSS filters like blur with animations