onload animation css

1<header>
2  <a href="#">Home</a>
3  <a href="#">About</a>
4  <a href="#">Products</a>
5  <a href="#">Contact</a>
6</header>
7
8<style>
9@keyframes slideInFromLeft {
10  0% {
11    transform: translateX(-100%);
12  }
13  100% {
14    transform: translateX(0);
15  }
16}
17
18header {  
19  /* This section calls the slideInFromLeft animation we defined above */
20  animation: 1s ease-out 0s 1 slideInFromLeft;
21  
22  background: #333;
23  padding: 30px;
24}
25
26/* 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;}
27</script>