css만으로 슬라이드 배너효과 내기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style type="text/css">
html, body, div, figure, input, textarea, p{margin:0;padding:0;}
figure {display:block;}
img{border:0; max-width:100%; vertical-align:middle;}
body{color:#333; font-size:12px; font-family:"NanumGothic","Malgun Gothic",dotum,sans-serif; background:#fff}
</style>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<!-- IE 에 css3 새로운 마크업을 인식시키는 스크립트 -->
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif] -->
</head>
<body>
<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { width:200px; overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
top:0;
left: 0;
text-align: left;
font-size: 0;
-webkit-animation:10s slidy ease-in-out infinite;
animation-name: slidy;
animation-duration:10s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-iteration-count:infinite;
}
</style>
<div id="slider">
<figure>
<img src="http://placehold.it/100x100" alt="">
<img src="http://placehold.it/200x200" alt="">
<img src="http://placehold.it/300x300" alt="">
<img src="http://placehold.it/400x400" alt="">
</figure>
</body>
</html>
배경 변화, 반복 움직임
.animation1 {
animation: circle 1s ease infinite;
}
@-webkit-keyframes circle {
100% {
-webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0;
}
}
@keyframes circle {
100% {
-webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0;
}
}
.animation4 {
background: linear-gradient(200deg, #996045, #5c2a48, #327d77);
background-size: 800% 800%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
-o-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:77% 0%}
50%{background-position:24% 100%}
100%{background-position:77% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:77% 0%}
50%{background-position:24% 100%}
100%{background-position:77% 0%}
}
@-o-keyframes AnimationName {
0%{background-position:77% 0%}
50%{background-position:24% 100%}
100%{background-position:77% 0%}
}
@keyframes AnimationName {
0%{background-position:77% 0%}
50%{background-position:24% 100%}
100%{background-position:77% 0%}
}