css/26.animations_code.html at main · Biswajit6844/css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animations</title>

<style>
.bluebox{
background-color:#3B5697;
color:white;
height:100px;
width:100px;
position: relative;
-webkit-animation: myanimation 3s;

}
/*
@keyframes myanimation {
from{background:green}
to{background:red}
}
 */
@-webkit-keyframes myanimation{
    0% {background:red;left 0px;top 0px;}
25% {background:yellow;left 200px;top 0px;}
50% {background:blue;left 200px;top 200px;}
75% {background:red;left 0px;top 200px;}
100% {background:green;left 0px;top 0px;}
}

.yellowbox{
background-color:rgb(250, 255, 0);
height:100px;
width:100px;

}
.greenbox{
background-color:rgb(10, 173, 18);
height:100px;
width:auto;
}

.great{
background-color:#593479;
}

</style>

</head>

<body>
<div class="bluebox">
<p>Facebook </p>
</div>

<div class="yellowbox">
<p>Apple.</p>
</div>

<div class="greenbox">
<p>Microsoft.</p>
</div>

</body>

</html>