blob: 478f00294c0a8299c9280aa333387284568df94f (
plain) (
tree)
|
|
.animation {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.screen {
position: relative;
border: solid 2px black;
margin: 0 auto;
margin-top: 10px;
background: white;
-webkit-animation: devices 10s ease 0s infinite;
-moz-animation: devices 10s ease 0s infinite;
-o-animation: devices 10s ease 0s infinite;
animation: devices 10s ease 0s infinite;
}
@-webkit-keyframes devices {
0% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
29% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png')
/*background-repeat: no-repeat;*/
}
33% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
60% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
66% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
94% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
100% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
}
moz-webkit-keyframes devices {
0% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
29% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png')
/*background-repeat: no-repeat;*/
}
33% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
60% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
66% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
94% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
100% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
}
@-o-keyframes devices {
0% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
29% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png')
/*background-repeat: no-repeat;*/
}
33% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
60% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
66% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
94% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
100% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
}
@keyframes devices {
0% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
29% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png')
/*background-repeat: no-repeat;*/
}
33% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
60% {
top: 68px;
width: 280px;
height: 210px;
border-radius: 20px;
border-width: 16px;
background-image: url('/img/pad.png')
/*background-repeat: no-repeat;*/
}
66% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 15px;
border-bottom-width: 20px;
border-radius: 5px;
background-image: url('/img/mobil.png')
/*background-repeat: no-repeat;*/
}
94% {
top: 100px;
width: 100px;
height: 190px;
border-width: 6px;
border-top-width: 7px;
border-bottom-width: 10px;
border-radius: 2px;
background-image: url('/img/mobil.png');
/*background-repeat: no-repeat;*/
}
100% {
top: 0;
width: 600px;
height: 337px;
border-width: 10px;
border-radius: 2px;
border-bottom-width: 15px;
background-image: url('/img/desktop.png');
/*background-repeat: no-repeat;*/
}
}
|
