Smoke Animation Effect On Text By Using Html CSS
Tags: html, css, javascript, beginners
Published: 2021-01-08 04:47:12

**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 <a href="https://blog.stackfindover.com/?s=animation" rel="dofollow" target="_blank"> Animation Effect</a>. 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**
```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>
```
###Smoke Animation Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.
```css
* {
    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%;
}
```
**Smoke Animation Effect On Text By Using Html CSS Output:**
{% youtube TFd55Jvd4dw %}