css 애니메이션

#애니메이션_by.써니

.time_motion{
      display:block;
      margin:0 auto;
      animation-name: time_s; /*애니메이션 이름*/
      animation-duration: 3s; /*3초동안*/
      animation-iteration-count: infinite;  /*무한반복*/
      animation-timing-function: linear; /*일정속도로*/
    }
    @keyframes time_s {   /*효과 애니메이션 0~100% 구간나눌수 있음*/
    　　  from {transform: rotate(0deg);}
         to {transform: rotate(360deg);}
    } 
 
/*키프레임으로 계속 회전하는 효과*/

모래시계효과.zip

0.00MB

#코드펜 애니메이션 효과더 알아보기!

 

#그라디언트 애니메이션

.intro_01 .txt_middle ul li span{
    display:block;
    padding:10px 0;
    margin:0 6px;
    color:#fff;
    font-size:19px;
    font-weight:300;
    background:#285383;
    text-align:center;
    border-radius:30px;
    /* Old browsers */
    background: linear-gradient(270deg, #309bfa, #2a61e1, #309bfa, #2a61e1);
    background: -moz-linear-gradient(270deg, #309bfa, #2a61e1, #309bfa, #2a61e1);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(270deg, #309bfa, #2a61e1, #309bfa, #2a61e1);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(270deg, #309bfa, #2a61e1, #309bfa, #2a61e1);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c9eff', endColorstr='#2a61e1,', GradientType=1);
    /* IE6-9 */
    background-size: 600% 600%;
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    -o-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}
@-webkit-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    } 
 
    50% {
        background-position: 100% 50%
    } 
 
    100% {
        background-position: 0% 50%
    }
} 
 
@-moz-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    } 
 
    50% {
        background-position: 100% 50%
    } 
 
    100% {
        background-position: 0% 50%
    }
} 
 
@-o-keyframes AnimationName {
    0% {
        background-position: 0% 50%
    } 
 
    50% {
        background-position: 100% 50%
    } 
 
    100% {
        background-position: 0% 50%
    }
} 
 
@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    } 
 
    50% {
        background-position: 100% 50%
    } 
 
    100% {
        background-position: 0% 50%
    }
}

 

#제자리에서 통통 튀는 애니메이션

 

#애니메이션 백그라운드 효과보기(scss 포함)

https://www.sliderrevolution.com/resources/css-animated-background/

The Best Looking CSS Animated Background Examples