1CSS animation properties template:
2{
3 animation-name: anima-name;
4 animation-duration: 1s;
5 animation-iteration-count: infinite;
6 animation-delay: 2s;
7 animation-direction: reverse | normal | alternate | alternate-reverse ;
8 animation-timing-function: ease | ease-out | ease-in | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0));
9 animation-fill-mode:forwards | backwards | both | none;
10}
11@keyframes anima-name {
12 from {
13 background-position:right;
14 }
15 to {
16 background-position:left;
17 }
18}
19@keyframes anima-name {
20 0% {
21 background-color: red;
22 }
23 50% {
24 background-color: green;
25 }
26 100% {
27 background-color: red;
28 }
29}
30
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
28</html>
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
28</html>
29
1<h1 class="ml6">
2 <span class="text-wrapper">
3 <span class="letters">Beautiful Questions</span>
4 </span>
5</h1>
6
7<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
1// Wrap every letter in a span
2var textWrapper = document.querySelector('.ml6 .letters');
3textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
4
5anime.timeline({loop: true})
6 .add({
7 targets: '.ml6 .letter',
8 translateY: ["1.1em", 0],
9 translateZ: 0,
10 duration: 750,
11 delay: (el, i) => 50 * i
12 }).add({
13 targets: '.ml6',
14 opacity: 0,
15 duration: 1000,
16 easing: "easeOutExpo",
17 delay: 1000
18 });
1.ml6 {
2 position: relative;
3 font-weight: 900;
4 font-size: 3.3em;
5}
6
7.ml6 .text-wrapper {
8 position: relative;
9 display: inline-block;
10 padding-top: 0.2em;
11 padding-right: 0.05em;
12 padding-bottom: 0.1em;
13 overflow: hidden;
14}
15
16.ml6 .letter {
17 display: inline-block;
18 line-height: 1em;
19}