on page load animation

Kevin answered on July 3, 2022 Popularity 9/10 Helpfulness 5/10

answer on page load animation

on page load animation

Comment

<!-- Example: -->
<style>
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

  header {  
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
  }
</style>

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}
<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Popularity 9/10 Helpfulness 5/10 Language html

Source: stackoverflow.com

Tags: animation html load

Link to this answer
Share Copy Link

Contributed on Jul 03 2022

Kevin

0 Answers Avg Quality 2/10

on page load animation

Contents

More Related Answers

on page load animation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.