Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .sliderfoto {
- position: relative;
- overflow: hidden;
- background-color: #efefef;
- }
- .sliderfoto {
- margin:20px auto;
- width: 944px;
- height: 450px;
- }
- .isi-slider img {
- width: 944px;
- height: 450px;
- float: left;
- }
- .isi-slider {
- position: absolute;
- width:3900px;
- animation-name:slider;
- animation-duration:16s;
- animation-timing-function: ease-in-out;
- animation-iteration-count:infinite;
- -webkit-animation-name:slider;
- -webkit-animation-duration:16s;
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-iteration-count:infinite;
- -moz-animation-name:slider;
- -moz-animation-duration:16s;
- -moz-animation-timing-function: ease-in-out;
- -moz-animation-iteration-count:infinite;
- -o-animation-name:slider;
- -o-animation-duration:16s;
- -o-animation-timing-function: ease-in-out;
- -o-animation-iteration-count:infinite;
- }
- .isi-slider:hover {
- -webkit-animation-play-state:paused;
- -moz-animation-play-state:paused;
- -o-animation-play-state:paused;
- animation-play-state:paused; }
- }
- .isi-slider img {
- float: right;
- }
- .sliderfoto:after {
- font-size: 150px;
- position: absolute;
- z-index: 12;
- color: rgba(255,255,255, 0);
- left: 300px; top: 80px;
- -webkit-transition: 1s all ease-in-out;
- -moz-transition: 1s all ease-in-out;
- transition: 1s all ease-in-out;
- }
- .sliderfoto:hover:after {
- color: rgba(255,255,255, 0.6);
- }
- @-moz-keyframes slider {
- 0% {
- left: 0; opacity: 0;
- }
- 2% {
- opacity: 1;
- }
- 20% {
- left: 0; opacity: 1;
- }
- 21% {
- opacity: 0;
- }
- 24% {
- opacity: 0;
- }
- 25% {
- left: -944px; opacity: 1;
- }
- 45% {
- left: -944px; opacity: 1;
- }
- 46% {
- opacity: 0;
- }
- 48% {
- opacity: 0;
- }
- 50% {
- left: -1888px; opacity: 1;
- }
- 70% {
- left: -1888px; opacity: 1;
- }
- 72% {
- opacity: 0;
- }
- 74% {
- opacity: 0;
- }
- 75% {
- left: -2832px; opacity: 1;
- }
- 95% {
- left: -2832px; opacity: 1;
- }
- 97% {
- left: -2832px; opacity: 0;
- }
- 100% {
- left: 0; opacity: 0;
- }
- }
- @-webkit-keyframes slider {
- 0% {
- left: 0; opacity: 0;
- }
- 2% {
- opacity: 1;
- }
- 20% {
- left: 0; opacity: 1;
- }
- 21% {
- opacity: 0;
- }
- 24% {
- opacity: 0;
- }
- 25% {
- left: -944px; opacity: 1;
- }
- 45% {
- left: -944px; opacity: 1;
- }
- 46% {
- opacity: 0;
- }
- 48% {
- opacity: 0;
- }
- 50% {
- left: -1888px; opacity: 1;
- }
- 70% {
- left: -1888px; opacity: 1;
- }
- 72% {
- opacity: 0;
- }
- 74% {
- opacity: 0;
- }
- 75% {
- left: -2832px; opacity: 1;
- }
- 95% {
- left: -2832px; opacity: 1;
- }
- 97% {
- left: -2832px; opacity: 0;
- }
- 100% {
- left: 0; opacity: 0;
- }
- }
- @keyframes slider {
- 0% {
- left: 0; opacity: 0;
- }
- 2% {
- opacity: 1;
- }
- 20% {
- left: 0; opacity: 1;
- }
- 21% {
- opacity: 0;
- }
- 24% {
- opacity: 0;
- }
- 25% {
- left: -944px; opacity: 1;
- }
- 45% {
- left: -944px; opacity: 1;
- }
- 46% {
- opacity: 0;
- }
- 48% {
- opacity: 0;
- }
- 50% {
- left: -1888px; opacity: 1;
- }
- 70% {
- left: -1888px; opacity: 1;
- }
- 72% {
- opacity: 0;
- }
- 74% {
- opacity: 0;
- }
- 75% {
- left: -2832px; opacity: 1;
- }
- 95% {
- left: -2832px; opacity: 1;
- }
- 97% {
- left: -2832px; opacity: 0;
- }
- 100% {
- left: 0; opacity: 0;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement