dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2025-10-27 07:53:11 +01:00
Code Issues Packages Projects Releases Wiki Activity
Website-Templates/retro-free-consulting-responsive-html5-website-template/assets/css/da-slider.css
Dawid Olko 0d2d73a034 Website templates
2023-07-26 19:33:39 +02:00

1248 lines
18 KiB
CSS
Raw Permalink Blame History

.da-slider {
width: 100%;
min-width: 520px;
height: 420px;
position: relative;
margin: 0% auto;
overflow: hidden;
/*background: transparent url(../images/waves.gif) repeat 0% 0%;
border-top: 8px solid #efc34a;
border-bottom: 8px solid #efc34a;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;*/
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
.da-slide {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: left;
}
.da-slide-current {
z-index: 1000;
}
.da-slider-fb .da-slide {
left: 100%;
}
.da-slider-fb .da-slide.da-slide-current {
left: 0px;
}
.da-slide h2, .da-slide p, .da-slide .da-link, .da-slide .da-img {
position: absolute;
opacity: 0;
left: 110%;
}
.da-slider-fb .da-slide h2, .da-slider-fb .da-slide p, .da-slider-fb .da-slide .da-link {
left: 10%;
opacity: 1;
}
.da-slider-fb .da-slide .da-img {
left: 60%;
opacity: 1;
}
.da-slide h2 {
color: #fff;
font-size: 54px;
width: 80%;
top: 0px;
white-space: nowrap;
z-index: 10;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-weight: normal;
text-align: center;
}
.da-slide p {
width: 80%;
top: 115px;
color: #fff;
font-size: 24px;
line-height: 26px;
height: 80px;
overflow: hidden;
font-weight: normal;
text-align: center;
}
.da-slide .da-img {
text-align: center;
width: 30%;
top: 70px;
height: 256px;
line-height: 320px;
left: 110%; /*60%*/
}
.da-slide .da-link {
top: 270px; /*depends on p height*/
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border: 3px solid rgba(255,255,255,0.8);
padding: 2px 20px 0px;
font-size: 16px;
line-height: 30px;
width: auto;
text-align: center;
background: rgba(255,255,255,0.2);
}
.da-slide .da-link:hover {
background: rgba(255,255,255,0.3);
}
.da-dots {
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
-moz-user-select: none;
-webkit-user-select: none;
}
.da-dots span {
display: inline-block;
position: relative;
width: 26px;
height: 6px;
background:#7E7E7E;
margin: 3px;
cursor: pointer;
box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after {
content: '';
width: 26px;
height: 6px;
position: absolute;
top: 0px;
left: 0px;
background:#fff;
}
.da-arrows {
-moz-user-select: none;
-webkit-user-select: none;
}
.da-arrows span {
position: absolute;
top: 20%;
height: 30px;
width: 30px;
border-radius: 50%;
cursor: pointer;
z-index: 2000;
opacity: 0;
background: transparent;
-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
-o-transition: opacity 0.4s ease-in-out-out 0.2s;
-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span {
opacity: 1;
}
.da-arrows span:after {
content: '';
position: absolute;
width: 31px;
height: 38px;
top: 5px;
left: 5px;
background: transparent url(../images/arrows.png) no-repeat top left;
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after {
}
.da-arrows span:active:after {
}
.da-arrows span.da-arrows-next:after {
background-position: top right;
}
.da-arrows span.da-arrows-prev {
left: 15px;
}
.da-arrows span.da-arrows-next {
right: 15px;
}
.da-slide-current h2, .da-slide-current p, .da-slide-current .da-link {
left: 10%;
opacity: 1;
}
.da-slide-current .da-img {
left: 60%;
opacity: 1;
}
/* Animation classes and animations */
/* Slide in from the right*/
.da-slide-fromright h2 {
-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p {
-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link {
-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img {
-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@keyframes fromRightAnim1 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim2 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim3 {
0% {
left: 110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromRightAnim4 {
0% {
left: 110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
/* Slide in from the left*/
.da-slide-fromleft h2 {
-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p {
-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link {
-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img {
-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-webkit-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-moz-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-o-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@-ms-keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
@keyframes fromLeftAnim1 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim2 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim3 {
0% {
left: -110%;
opacity: 0;
}
1% {
left: 10%;
opacity: 0;
}
100% {
left: 10%;
opacity: 1;
}
}
@keyframes fromLeftAnim4 {
0% {
left: -110%;
opacity: 0;
}
100% {
left: 60%;
opacity: 1;
}
}
/* Slide out to the right */
.da-slide-toright h2 {
-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p {
-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link {
-webkit-animation: toRightAnim3 0.4s ease-in-out both;
-moz-animation: toRightAnim3 0.4s ease-in-out both;
-o-animation: toRightAnim3 0.4s ease-in-out both;
-ms-animation: toRightAnim3 0.4s ease-in-out both;
animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img {
-webkit-animation: toRightAnim4 0.6s ease-in-out both;
-moz-animation: toRightAnim4 0.6s ease-in-out both;
-o-animation: toRightAnim4 0.6s ease-in-out both;
-ms-animation: toRightAnim4 0.6s ease-in-out both;
animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim1 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim2 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim3 {
0% {
left: 10%;
opacity: 1;
}
99% {
left: 10%;
opacity: 0;
}
100% {
left: 100%;
opacity: 0;
}
}
@keyframes toRightAnim4 {
0% {
left: 60%;
opacity: 1;
}
30% {
left: 55%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
}
}
/* Slide out to the left*/
.da-slide-toleft h2 {
-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
-moz-animation: toLeftAnim1 0.6s ease-in-out both;
-o-animation: toLeftAnim1 0.6s ease-in-out both;
-ms-animation: toLeftAnim1 0.6s ease-in-out both;
animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p {
-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link {
-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img {
-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-webkit-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-moz-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-o-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@-ms-keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim1 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim2 {
0% {
left: 10%;
opacity: 1;
}
30% {
left: 15%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim3 {
0% {
left: 10%;
opacity: 1;
}
100% {
left: -50%;
opacity: 0;
}
}
@keyframes toLeftAnim4 {
0% {
left: 60%;
opacity: 1;
}
70% {
left: 30%;
opacity: 0;
}
100% {
left: -50%;
opacity: 0;
}
}
@media (min-width: 768px) {
}
@media (max-width: 768px) {
.da-slider {
width: 100%;
min-width: initial;
}
}
@media (max-width: 480px) {
}
Reference in New Issue View Git Blame Copy Permalink