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
1<style>
2.fade-css-example {
3 animation: fade-animation-example ease 10s;
4}
5
6@keyframes fade-animation-example {
7 0% {
8 opacity:0;
9 }
10 100% {
11 opacity:1;
12 }
13}
14</style>
15<div class="fade-css-example">
16 <img src="image (1).jpg">
17</div>
1#test p {
2 opacity: 0;
3 font-size: 21px;
4 margin-top: 25px;
5 text-align: center;
6
7 -webkit-transition: opacity 2s ease-in;
8 -moz-transition: opacity 2s ease-in;
9 -ms-transition: opacity 2s ease-in;
10 -o-transition: opacity 2s ease-in;
11 transition: opacity 2s ease-in;
12}
13
14#test p.load {
15 opacity: 1;
16}
17
1Copy.box {
2 -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
3 mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
4}
5