[css] 효과 모음

1. 줌인

#boss_thanks {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#boss_thanks:hover  {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

 

2. 줌아웃

#boss_thanks {
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#boss_thanks:hover {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

}

 

3. 슬라이드

#boss_thanks {
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
#boss_thanks:hover  {
    margin-left: -20px;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

 

4. flash

#boss_thanks:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}
@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}
@keyframes flash {
    0% {
        opacity: .4;
    }
    100% {
        opacity: 1;
    }
}

 

 

 

[출처]

https://yunamom.tistory.com/217