Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

moozi

css로 애니메이션 구현 예제 본문

TIS_2016/HTML5_1기

css로 애니메이션 구현 예제

moozi 2016. 3. 29. 14:38

<!DOCTYPE html>
<html>
<head>
  
<style>
div {
    width:80px;
    height:80px;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 1s;
     position: relative;
    background-image: url("1.png");
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
     0%   {background-image: url("1.png"); left: 50px;}
    10%   {background-image: url("2.png"); left: 100px;}
    20%   {background-image: url("3.png"); left: 150px;}
    30%   {background-image: url("4.png"); left: 200px;}
    40%   {background-image: url("5.png"); left: 250px;}
    50%   {background-image: url("6.png"); left: 300px;}
    60%   {background-image: url("7.png"); left: 350px;}
    70%   {background-image: url("8.png"); left: 400px;}
    80%   {background-image: url("9.png"); left: 450px;}
    90%   {background-image: url("10.png"); left: 500px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-image: url("1.png"); left: 50px;}
    10%   {background-image: url("2.png"); left: 100px;}
    20%   {background-image: url("3.png"); left: 150px;}
    30%   {background-image: url("4.png"); left: 200px;}
    40%   {background-image: url("5.png"); left: 250px;}
    50%   {background-image: url("6.png"); left: 300px;}
    60%   {background-image: url("7.png"); left: 350px;}
    70%   {background-image: url("8.png"); left: 400px;}
    80%   {background-image: url("9.png"); left: 450px;}
    90%   {background-image: url("10.png"); left: 500px;}
}
</style>
</head>
<body>

 

<div>
   
</div>

</body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

3/29 html코드  (0) 2016.03.29
3/29 css코드  (0) 2016.03.29
3/29 오전수업 css코드  (0) 2016.03.29
3/28 오전수업 소스코드  (0) 2016.03.28
javascript 연습문제 풀이 1 ~ 8  (0) 2016.03.25
'TIS_2016/HTML5_1기' Related Articles more
Comments