1/* Just add .fade-in class to element */
2
3.fade-in {
4 animation: fadeIn 2s;
5 opacity: 1;
6}
7
8@keyframes fadeIn {
9 from {
10 opacity: 0;
11 }
12 to {
13 opacity: 1;
14 }
15}
1#test p {
2 margin-top: 25px;
3 font-size: 21px;
4 text-align: center;
5
6 -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
7 -moz-animation: fadein 2s; /* Firefox < 16 */
8 -ms-animation: fadein 2s; /* Internet Explorer */
9 -o-animation: fadein 2s; /* Opera < 12.1 */
10 animation: fadein 2s;
11}
12
13@keyframes fadein {
14 from { opacity: 0; }
15 to { opacity: 1; }
16}
17
18/* Firefox < 16 */
19@-moz-keyframes fadein {
20 from { opacity: 0; }
21 to { opacity: 1; }
22}
23
24/* Safari, Chrome and Opera > 12.1 */
25@-webkit-keyframes fadein {
26 from { opacity: 0; }
27 to { opacity: 1; }
28}
29
30/* Internet Explorer */
31@-ms-keyframes fadein {
32 from { opacity: 0; }
33 to { opacity: 1; }
34}
35
36/* Opera < 12.1 */
37@-o-keyframes fadein {
38 from { opacity: 0; }
39 to { opacity: 1; }
40}
41