본문 바로가기
CSS

FadeIn 효과

by YoYoHa 2020. 5. 6.
728x90
반응형

/* FadeIn 효과  ( class에 추가해서 효과를 줄 수 있음 ) */

.image_fadein

{ 

    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */

    -moz-animation: fadein 1s; /* Firefox < 16 */

    -ms-animation: fadein 1s; /* Internet Explorer */

    -o-animation: fadein 1s; /* Opera < 12.1 */

    animation: fadein 1s;

}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Firefox < 16 */

@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Internet Explorer */

@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* Opera < 12.1 */

@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
728x90
반응형

댓글