z-index not working properly on ios devices - css

I am working on a preloader animation on other devices everything is working fine except the ios browser...
initially, the polaroid image should be at the back first, (it should look like it was printing a polaroid image from the camera), after that it flips then positions on top of the camera then scales to 0 for the outro of the polaroid.
here is the codepen codes
.preloader {
background: #f8f8f8;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.stack,
.cameras {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-20%);
-webkit-transform: translateX(-50%) translateY(-20%);
-o-transform: translateX(-50%) translateY(-20%);
-ms-transform: translateX(-50%) translateY(-20%);
transform: translateX(-50%) translateY(-20%);
}
.cameras {
-webkit-perspective: 800px;
perspective: 800px;
-moz-transform: translateX(-50%) translateY(-85%);
-webkit-transform: translateX(-50%) translateY(-85%);
-o-transform: translateX(-50%) translateY(-85%);
-ms-transform: translateX(-50%) translateY(-85%);
transform: translateX(-50%) translateY(-85%);
}
.preloader .cameras span img.camera-img {
width: 100%;
position: relative;
z-index: 9;
}
.cameras span {
display: inline-block;
position: relative;
}
.cameras span .polaroid {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
max-width: 130px;
position: absolute;
z-index: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
animation: ikot infinite 5s linear;
}
#keyframes ikot {
0% {
bottom: 0;
z-index: 0;
}
60% {
bottom: 150%;
z-index: 0;
-webkit-transform: rotateX(0deg) translateZ(2px);
-ms-transform: rotateX(0deg) translateZ(2px);
-o-transform: rotateX(0deg) translateZ(2px);
transform: rotateX(0deg) translateZ(2px);
}
66% {
bottom: 180%;
z-index: 0;
-webkit-transform: rotateX(90deg) translateZ(2px);
-ms-transform: rotateX(90deg) translateZ(2px);
-o-transform: rotateX(90deg) translateZ(2px);
transform: rotateX(90deg) translateZ(2px);
}
68% {
bottom: 30%;
z-index: 0;
-webkit-transform: rotateX(180deg) translateZ(2px);
-ms-transform: rotateX(180deg) translateZ(2px);
-o-transform: rotateX(180deg) translateZ(2px);
transform: rotateX(180deg) translateZ(2px);
}
75% {
bottom: 0%;
z-index: 0;
-webkit-transform: rotateX(-80deg) translateZ(2px);
-ms-transform: rotateX(-80deg) translateZ(2px);
-o-transform: rotateX(-80deg) translateZ(2px);
transform: rotateX(-80deg) translateZ(2px);
}
80% {
bottom: -150%;
z-index: 0;
-webkit-transform: rotateX(-140deg) translateZ(2px);
-ms-transform: rotateX(-140deg) translateZ(2px);
-o-transform: rotateX(-140deg) translateZ(2px);
transform: rotateX(-140deg) translateZ(2px);
}
82% {
bottom: -120%;
z-index: 99;
-webkit-transform: rotateX(-75deg) translateZ(2px);
-ms-transform: rotateX(-75deg) translateZ(2px);
-o-transform: rotateX(-75deg) translateZ(2px);
transform: rotateX(-75deg) translateZ(2px);
}
86% {
bottom: -55%;
z-index: 99;
-webkit-transform: rotateX(-40deg) translateZ(2px);
-ms-transform: rotateX(-40deg) translateZ(2px);
-o-transform: rotateX(-40deg) translateZ(2px);
transform: rotateX(-40deg) translateZ(2px);
}
90% {
bottom: 0;
z-index: 99;
-webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
-ms-transform: rotateX(0) translateZ(2px) scale(1.8);
-o-transform: rotateX(0) translateZ(2px) scale(1.8);
transform: rotateX(0) translateZ(2px) scale(1.8);
}
95% {
bottom: 0;
z-index: 1;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
100% {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes ikot {
0% {
bottom: 0;
z-index: 0;
}
60% {
bottom: 150%;
z-index: 0;
-webkit-transform: rotateX(0deg) translateZ(2px);
-ms-transform: rotateX(0deg) translateZ(2px);
-o-transform: rotateX(0deg) translateZ(2px);
transform: rotateX(0deg) translateZ(2px);
}
66% {
bottom: 180%;
z-index: 0;
-webkit-transform: rotateX(90deg) translateZ(2px);
-ms-transform: rotateX(90deg) translateZ(2px);
-o-transform: rotateX(90deg) translateZ(2px);
transform: rotateX(90deg) translateZ(2px);
}
68% {
bottom: 30%;
z-index: 0;
-webkit-transform: rotateX(180deg) translateZ(2px);
-ms-transform: rotateX(180deg) translateZ(2px);
-o-transform: rotateX(180deg) translateZ(2px);
transform: rotateX(180deg) translateZ(2px);
}
75% {
bottom: 0%;
z-index: 0;
-webkit-transform: rotateX(-80deg) translateZ(2px);
-ms-transform: rotateX(-80deg) translateZ(2px);
-o-transform: rotateX(-80deg) translateZ(2px);
transform: rotateX(-80deg) translateZ(2px);
}
80% {
bottom: -150%;
z-index: 0;
-webkit-transform: rotateX(-140deg) translateZ(2px);
-ms-transform: rotateX(-140deg) translateZ(2px);
-o-transform: rotateX(-140deg) translateZ(2px);
transform: rotateX(-140deg) translateZ(2px);
}
82% {
bottom: -120%;
z-index: 99;
-webkit-transform: rotateX(-75deg) translateZ(2px);
-ms-transform: rotateX(-75deg) translateZ(2px);
-o-transform: rotateX(-75deg) translateZ(2px);
transform: rotateX(-75deg) translateZ(2px);
}
86% {
bottom: -55%;
z-index: 99;
-webkit-transform: rotateX(-40deg) translateZ(2px);
-ms-transform: rotateX(-40deg) translateZ(2px);
-o-transform: rotateX(-40deg) translateZ(2px);
transform: rotateX(-40deg) translateZ(2px);
}
90% {
bottom: 0;
z-index: 99;
-webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
-ms-transform: rotateX(0) translateZ(2px) scale(1.8);
-o-transform: rotateX(0) translateZ(2px) scale(1.8);
transform: rotateX(0) translateZ(2px) scale(1.8);
}
95% {
bottom: 0;
z-index: 1;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
100% {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
}
#-moz-keyframes ikot {
0% {
bottom: 0;
z-index: 0;
}
60% {
bottom: 150%;
z-index: 0;
-webkit-transform: rotateX(0deg) translateZ(2px);
-ms-transform: rotateX(0deg) translateZ(2px);
-o-transform: rotateX(0deg) translateZ(2px);
transform: rotateX(0deg) translateZ(2px);
}
66% {
bottom: 180%;
z-index: 0;
-webkit-transform: rotateX(90deg) translateZ(2px);
-ms-transform: rotateX(90deg) translateZ(2px);
-o-transform: rotateX(90deg) translateZ(2px);
transform: rotateX(90deg) translateZ(2px);
}
68% {
bottom: 30%;
z-index: 0;
-webkit-transform: rotateX(180deg) translateZ(2px);
-ms-transform: rotateX(180deg) translateZ(2px);
-o-transform: rotateX(180deg) translateZ(2px);
transform: rotateX(180deg) translateZ(2px);
}
75% {
bottom: 0%;
z-index: 0;
-webkit-transform: rotateX(-80deg) translateZ(2px);
-ms-transform: rotateX(-80deg) translateZ(2px);
-o-transform: rotateX(-80deg) translateZ(2px);
transform: rotateX(-80deg) translateZ(2px);
}
80% {
bottom: -150%;
z-index: 0;
-webkit-transform: rotateX(-140deg) translateZ(2px);
-ms-transform: rotateX(-140deg) translateZ(2px);
-o-transform: rotateX(-140deg) translateZ(2px);
transform: rotateX(-140deg) translateZ(2px);
}
82% {
bottom: -120%;
z-index: 99;
-webkit-transform: rotateX(-75deg) translateZ(2px);
-ms-transform: rotateX(-75deg) translateZ(2px);
-o-transform: rotateX(-75deg) translateZ(2px);
transform: rotateX(-75deg) translateZ(2px);
}
86% {
bottom: -55%;
z-index: 99;
-webkit-transform: rotateX(-40deg) translateZ(2px);
-ms-transform: rotateX(-40deg) translateZ(2px);
-o-transform: rotateX(-40deg) translateZ(2px);
transform: rotateX(-40deg) translateZ(2px);
}
90% {
bottom: 0;
z-index: 99;
-webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
-ms-transform: rotateX(0) translateZ(2px) scale(1.8);
-o-transform: rotateX(0) translateZ(2px) scale(1.8);
transform: rotateX(0) translateZ(2px) scale(1.8);
}
95% {
bottom: 0;
z-index: 1;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
100% {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
}
#-ms-keyframes ikot {
0% {
bottom: 0;
z-index: 0;
}
60% {
bottom: 150%;
z-index: 0;
-webkit-transform: rotateX(0deg) translateZ(2px);
-ms-transform: rotateX(0deg) translateZ(2px);
-o-transform: rotateX(0deg) translateZ(2px);
transform: rotateX(0deg) translateZ(2px);
}
66% {
bottom: 180%;
z-index: 0;
-webkit-transform: rotateX(90deg) translateZ(2px);
-ms-transform: rotateX(90deg) translateZ(2px);
-o-transform: rotateX(90deg) translateZ(2px);
transform: rotateX(90deg) translateZ(2px);
}
68% {
bottom: 30%;
z-index: 0;
-webkit-transform: rotateX(180deg) translateZ(2px);
-ms-transform: rotateX(180deg) translateZ(2px);
-o-transform: rotateX(180deg) translateZ(2px);
transform: rotateX(180deg) translateZ(2px);
}
75% {
bottom: 0%;
z-index: 0;
-webkit-transform: rotateX(-80deg) translateZ(2px);
-ms-transform: rotateX(-80deg) translateZ(2px);
-o-transform: rotateX(-80deg) translateZ(2px);
transform: rotateX(-80deg) translateZ(2px);
}
80% {
bottom: -150%;
z-index: 0;
-webkit-transform: rotateX(-140deg) translateZ(2px);
-ms-transform: rotateX(-140deg) translateZ(2px);
-o-transform: rotateX(-140deg) translateZ(2px);
transform: rotateX(-140deg) translateZ(2px);
}
82% {
bottom: -120%;
z-index: 99;
-webkit-transform: rotateX(-75deg) translateZ(2px);
-ms-transform: rotateX(-75deg) translateZ(2px);
-o-transform: rotateX(-75deg) translateZ(2px);
transform: rotateX(-75deg) translateZ(2px);
}
86% {
bottom: -55%;
z-index: 99;
-webkit-transform: rotateX(-40deg) translateZ(2px);
-ms-transform: rotateX(-40deg) translateZ(2px);
-o-transform: rotateX(-40deg) translateZ(2px);
transform: rotateX(-40deg) translateZ(2px);
}
90% {
bottom: 0;
z-index: 99;
-webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
-ms-transform: rotateX(0) translateZ(2px) scale(1.8);
-o-transform: rotateX(0) translateZ(2px) scale(1.8);
transform: rotateX(0) translateZ(2px) scale(1.8);
}
95% {
bottom: 0;
z-index: 1;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
100% {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
}
#-o-keyframes ikot {
0% {
bottom: 0;
z-index: 0;
}
60% {
bottom: 150%;
z-index: 0;
-webkit-transform: rotateX(0deg) translateZ(2px);
-ms-transform: rotateX(0deg) translateZ(2px);
-o-transform: rotateX(0deg) translateZ(2px);
transform: rotateX(0deg) translateZ(2px);
}
66% {
bottom: 180%;
z-index: 0;
-webkit-transform: rotateX(90deg) translateZ(2px);
-ms-transform: rotateX(90deg) translateZ(2px);
-o-transform: rotateX(90deg) translateZ(2px);
transform: rotateX(90deg) translateZ(2px);
}
68% {
bottom: 30%;
z-index: 0;
-webkit-transform: rotateX(180deg) translateZ(2px);
-ms-transform: rotateX(180deg) translateZ(2px);
-o-transform: rotateX(180deg) translateZ(2px);
transform: rotateX(180deg) translateZ(2px);
}
75% {
bottom: 0%;
z-index: 0;
-webkit-transform: rotateX(-80deg) translateZ(2px);
-ms-transform: rotateX(-80deg) translateZ(2px);
-o-transform: rotateX(-80deg) translateZ(2px);
transform: rotateX(-80deg) translateZ(2px);
}
80% {
bottom: -150%;
z-index: 0;
-webkit-transform: rotateX(-140deg) translateZ(2px);
-ms-transform: rotateX(-140deg) translateZ(2px);
-o-transform: rotateX(-140deg) translateZ(2px);
transform: rotateX(-140deg) translateZ(2px);
}
82% {
bottom: -120%;
z-index: 99;
-webkit-transform: rotateX(-75deg) translateZ(2px);
-ms-transform: rotateX(-75deg) translateZ(2px);
-o-transform: rotateX(-75deg) translateZ(2px);
transform: rotateX(-75deg) translateZ(2px);
}
86% {
bottom: -55%;
z-index: 99;
-webkit-transform: rotateX(-40deg) translateZ(2px);
-ms-transform: rotateX(-40deg) translateZ(2px);
-o-transform: rotateX(-40deg) translateZ(2px);
transform: rotateX(-40deg) translateZ(2px);
}
90% {
bottom: 0;
z-index: 99;
-webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
-ms-transform: rotateX(0) translateZ(2px) scale(1.8);
-o-transform: rotateX(0) translateZ(2px) scale(1.8);
transform: rotateX(0) translateZ(2px) scale(1.8);
}
95% {
bottom: 0;
z-index: 1;
-webkit-transform: scale(1.8);
-ms-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
100% {
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
}
.preloader .cameras span.current {
display: block;
}
.preloader .cameras span {
display: none;
perspective: 0;
}
<div class="preloader">
<div class="stack">
<img src="https://preview.ibb.co/jLCafv/stack.jpg">
</div>
<div class="cameras">
<span class="current">
<img src="https://image.ibb.co/i5Dy0v/q10.png" class="camera-img">
<img src="https://image.ibb.co/nJE8YF/q10_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/ebc97a/mini8.png" class="camera-img">
<img src="https://image.ibb.co/e5iVfv/mini8_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/epVU7a/mini9.png" class="camera-img">
<img src="https://image.ibb.co/cct7Sa/mini9_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/hBup7a/mini25.png" class="camera-img">
<img src="https://image.ibb.co/iaOJYF/mini25_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/fAXbna/mini70.png" class="camera-img">
<img src="https://image.ibb.co/hNxqfv/mini70_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/eu8Gna/mini90.png" class="camera-img">
<img src="https://image.ibb.co/heNj7a/mini90_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/fLYStF/wide300.png" class="camera-img">
<img src="https://image.ibb.co/cvQAfv/wide300_sample.jpg" class="polaroid">
</span>
<span>
<img src="https://image.ibb.co/dP3hSa/hellokitty.png" class="camera-img">
<img src="https://image.ibb.co/fW0Mna/hellokitty_sample.jpg" class="polaroid">
</span>
</div>
</div>
Please help

Related

Key frame animation is jerky in ipad both safari and chrome. How to smooth animation in safari?

I have done a ball animation rotation in 360 degree on button click at the same time it moves left and right. It works in chrome and opera perfectly but issues in firefox and iPad devices. In iPad devices animation is so much jerky so how to add smooth animation? In firefox, the number is not showing
$(function(){
$('#genBall').on("click", function () {
$('.eight-ball').addClass("rotate-ball");
setTimeout(RemoveClass, 2000);
});
function RemoveClass() {
$('.eight-ball').removeClass("rotate-ball");
}
});
.eight-ball {
width: 475px;
height: 475px;
overflow: hidden;
position: relative;
border-radius: 50%;
background: #1f84d0;
transform: rotate(12deg);
user-select: none;
display: table;
}
.eight-ball:before {
content: "";
width: 80px;
height: 80px;
background: #fff;
position: absolute;
top: 30px;
left: 40px;
z-index: 999;
opacity: 0.8;
border-radius: 50%;
filter: blur(13px);
}
.eight-ball:after {
content: "";
width: 100%;
height: 100%;
opacity: 0.7;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
transform: rotate(-137deg);
box-shadow: inset -3px 0 6px 2px rgba(255, 255, 255, 0.2),
inset 50px 0 70px 6px rgba(0, 0, 0, 0.5);
}
.eight-ball-inner-white {
width: 75%;
height: 75%;
overflow: hidden;
margin-top: 55px;
margin-left: 6px;
border-radius: 50%;
position: relative;
display: inline-block;
background: rgb(224,235,245);
background: -moz-linear-gradient(top, rgba(224,235,245,1) 0%, rgba(190,205,214,1) 100%);
background: -webkit-linear-gradient(top, rgba(224,235,245,1) 0%,rgba(190,205,214,1) 100%);
background: linear-gradient(to bottom, rgba(224,235,245,1) 0%,rgba(190,205,214,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf5', endColorstr='#becdd6',GradientType=0 );
}
.rotate-ball {
-webkit-animation: rotateanim ease-in-out 2s;
-moz-animation: rotateanim ease-in-out 2s;
-ms-animation: rotateanim ease-in-out 2s;
-o-animation: rotateanim ease-in-out 2s;
animation: rotateanim ease-in-out 2s;
}
#-webkit-keyframes rotateanim {
0% {margin-left: 0px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
30% {margin-left: 340px; transform: rotate(205deg); -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -o-transform: rotate(205deg); -ms-transform: rotate(205deg);}
50% {margin-left: -340px; transform: rotate(-320deg); transform: rotate(-320deg); -webkit-transform: rotate(-320deg); -moz-transform: rotate(-320deg); -o-transform: rotate(-320deg); -ms-transform: rotate(-320deg);}
100% {margin-left: 0px; transform: rotate(12deg); transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
}
#keyframes rotateanim {
0% {margin-left: 0px; transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
30% {margin-left: 340px; transform: rotate(205deg); -webkit-transform: rotate(205deg); -moz-transform: rotate(205deg); -o-transform: rotate(205deg); -ms-transform: rotate(205deg);}
50% {margin-left: -340px; transform: rotate(-320deg); transform: rotate(-320deg); -webkit-transform: rotate(-320deg); -moz-transform: rotate(-320deg); -o-transform: rotate(-320deg); -ms-transform: rotate(-320deg);}
100% {margin-left: 0px; transform: rotate(12deg); transform: rotate(12deg); -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg);}
}
.eight-ball-inner-white span {
color: #222b32;
position: absolute;
top: 50%;
left: 50%;
font-size: 140px;
font-weight: bold;
transition: all ease 1s;
transform: translate(-50%,-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eight-ball">
<div class="eight-ball-inner-white spin-ball">
<span>GO</span>
</div>
</div>
<button id="genBall">play</button>

Finally, I found the solution. Added extra div after eightball class. Instead of giving rotation and movement to one div give separate animation to both div. Use movement to the main div and use rotation to child
$(function(){
$('#genBall').on("click", function () {
$('.eight-ball').addClass("rotate-ball");
setTimeout(RemoveClass, 2000);
});
function RemoveClass() {
$('.eight-ball').removeClass("rotate-ball");
}
});
.eight-ball {
width: 475px;
height: 475px;
overflow: hidden;
position: relative;
border-radius: 50%;
background: #1f84d0;
user-select: none;
display: table;
}
.eight-ball>div {
width: 100%;
height: 100%;
}
.eight-ball>div:before {
content: "";
width: 80px;
height: 80px;
background: #fff;
position: absolute;
top: 30px;
left: 40px;
z-index: 999;
opacity: 0.8;
border-radius: 50%;
filter: blur(13px);
}
.eight-ball:after {
content: "";
width: 100%;
height: 100%;
opacity: 0.7;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
transform: rotate(-137deg);
box-shadow: inset -3px 0 6px 2px rgba(255, 255, 255, 0.2), inset 50px 0 70px 6px rgba(0, 0, 0, 0.5);
}
.eight-ball-inner-white {
width: 75%;
height: 75%;
overflow: hidden;
margin-top: 55px;
margin-left: 6px;
border-radius: 50%;
position: relative;
display: inline-block;
transform: rotate(12deg);
background: rgb(224, 235, 245);
background: -moz-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
background: -webkit-linear-gradient(top, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
background: linear-gradient(to bottom, rgba(224, 235, 245, 1) 0%, rgba(190, 205, 214, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ebf5', endColorstr='#becdd6', GradientType=0);
}
.rotate-ball {
-webkit-animation: rotateanim ease-in-out 2s;
-moz-animation: rotateanim ease-in-out 2s;
-ms-animation: rotateanim ease-in-out 2s;
-o-animation: rotateanim ease-in-out 2s;
animation: rotateanim ease-in-out 2s;
}
.rotate-ball>div {
-webkit-animation: rotateanimInner ease-in-out 2s;
-moz-animation: rotateanimInner ease-in-out 2s;
-ms-animation: rotateanimInner ease-in-out 2s;
-o-animation: rotateanimInner ease-in-out 2s;
animation: rotateanimInner ease-in-out 2s;
}
#-webkit-keyframes rotateanim {
0% {
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
30% {
transform: translate(340px, 0px);
-webkit-transform: translate(340px, 0px);
-moz-transform: translate(340px, 0px);
-o-transform: translate(340px, 0px);
-ms-transform: translate(340px, 0px);
}
50% {
transform: translate(-340px, 0px);
-webkit-transform: translate(-340px, 0px);
-moz-transform: translate(-340px, 0px);
-o-transform: translate(-340px, 0px);
-ms-transform: translate(-340px, 0px);
}
100% {
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
}
#keyframes rotateanim {
0% {
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
30% {
transform: translate(340px, 0px);
-webkit-transform: translate(340px, 0px);
-moz-transform: translate(340px, 0px);
-o-transform: translate(340px, 0px);
-ms-transform: translate(340px, 0px);
}
50% {
transform: translate(-340px, 0px);
-webkit-transform: translate(-340px, 0px);
-moz-transform: translate(-340px, 0px);
-o-transform: translate(-340px, 0px);
-ms-transform: translate(-340px, 0px);
}
100% {
transform: translate(0px, 0px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
}
}
#-webkit-keyframes rotateanimInner {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
30% {
transform: rotate(205deg);
-webkit-transform: rotate(205deg);
-moz-transform: rotate(205deg);
-o-transform: rotate(205deg);
-ms-transform: rotate(205deg);
}
50% {
transform: rotate(-320deg);
-webkit-transform: rotate(-320deg);
-moz-transform: rotate(-320deg);
-o-transform: rotate(-320deg);
-ms-transform: rotate(-320deg);
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
}
#keyframes rotateanimInner {
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
30% {
transform: rotate(205deg);
-webkit-transform: rotate(205deg);
-moz-transform: rotate(205deg);
-o-transform: rotate(205deg);
-ms-transform: rotate(205deg);
}
50% {
transform: rotate(-320deg);
-webkit-transform: rotate(-320deg);
-moz-transform: rotate(-320deg);
-o-transform: rotate(-320deg);
-ms-transform: rotate(-320deg);
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
}
.eight-ball-inner-white span {
color: #222b32;
position: absolute;
top: 50%;
left: 50%;
font-size: 140px;
font-weight: bold;
transition: all ease 1s;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="eight-ball">
<div>
<div class="eight-ball-inner-white spin-ball">
<span id="bingoBalls">55</span>
</div>
</div>
</div>
<button id="genBall">play</button>

Trying to make this Carousel responsive

I made this CSS carousel after following a tutorial online and realized it wasn't responsive. I have tried resizing the images how ever, it doesn't effect the actual carousel, I tried adding bootstrap to see if it would help but no luck. to clarify I am trying to make the size of the carousel responsive, I have already made the images responsive. I really like the look of this carousel and would like to use it for my porfolio. any suggestions?
#wrappercarousel {
perspective: 2500;
-webkit-perspective: 2500;
width: 1000px;
margin:60px 0 40 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#-webkit-keyframes spin {
from {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
}
#image {
margin: 0 auto;
height: 300px;
width: 400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 24s infinite linear;
-moz-animation: spin 24s infinite linear;
-o-animation: spin 24s infinite linear;
-webkit-animation: spin 24s infinite linear;
}
.image {
position: absolute;
height: 300px;
width: 400px;
border-radius: 25px;
background-color: rgba(0,0,0,0.6);
text-align: center;
font-size: 20em;
color: #fff;
}
#image > .i1 {
transform: translateZ(485px);
-moz-transform: translateZ(485px);
-o-transform: translateZ(485px);
-ms-transform: translateZ(485px);
-webkit-transform: translateZ(500px);
-webkit-perspective: 2500px;
perspective: 2500px;
}
#image > .i2 {
transform: rotateY(45deg) translateZ(485px);
-moz-transform: rotateY(45deg) translateZ(485px);
-o-transform: rotateY(45deg) translateZ(485px);
-ms-transform: rotateY(45deg) translateZ(485px);
-webkit-transform: rotateY(45deg) translateZ(500px);
}
#image > .i3 {
transform: rotateY(90deg) translateZ(485px);
-moz-transform: rotateY(90deg) translateZ(485px);
-o-transform: rotateY(90deg) translateZ(485px);
-ms-transform: rotateY(90deg) translateZ(485px);
-webkit-transform: rotateY(90deg) translateZ(500px);
}
#image > .i4 {
transform: rotateY(135deg) translateZ(485px);
-moz-transform: rotateY(135deg) translateZ(485px);
-o-transform: rotateY(135deg) translateZ(485px);
-ms-transform: rotateY(135deg) translateZ(485px);
-webkit-transform: rotateY(135deg) translateZ(500px);
}
#image > .i5 {
transform: rotateY(180deg) translateZ(485px);
-moz-transform: rotateY(180deg) translateZ(485px);
-o-transform: rotateY(180deg) translateZ(485px);
-ms-transform: rotateY(180deg) translateZ(485px);
-webkit-transform: rotateY(180deg) translateZ(500px);
}
#image > .i6 {
transform: rotateY(225deg) translateZ(485px);
-moz-transform: rotateY(225deg) translateZ(485px);
-o-transform: rotateY(225deg) translateZ(485px);
-ms-transform: rotateY(225deg) translateZ(485px);
-webkit-transform: rotateY(225deg) translateZ(500px);
}
#image > .i7 {
transform: rotateY(270deg) translateZ(485px);
-moz-transform: rotateY(270deg) translateZ(485px);
-o-transform: rotateY(270deg) translateZ(485px);
-ms-transform: rotateY(270deg) translateZ(485px);
-webkit-transform: rotateY(270deg) translateZ(500px);
}
#image > .i8 {
transform: rotateY(315deg) translateZ(485px);
-moz-transform: rotateY(315deg) translateZ(485px);
-o-transform: rotateY(315deg) translateZ(485px);
-ms-transform: rotateY(315deg) translateZ(485px);
-webkit-transform: rotateY(315deg) translateZ(500px);
}
#image > .i9 {
transform: rotateY(360deg) translateZ(485px);
-moz-transform: rotateY(360deg) translateZ(485px);
-o-transform: rotateY(360deg) translateZ(485px);
-ms-transform: rotateY(360deg) translateZ(485px);
-webkit-transform: rotateY(360deg) translateZ(500px);
}
#image img{
height: 300px;
width: 400px;
margin-bottom: 0px;
}
img {
border-radius: 1px;
}
<div class= "animated fadeIn " id="wrappercarousel">
<div id="image">
<div class="image i1"><img src="/images/carousel/oliver%20people.jpg"></div>
<div class="image i2"><img src="/images/carousel/newmaui.jpg"></div>
<div class="image i3"><img src="/images/carousel/Theo1.jpg"></div>
<div class="image i4"><img src="/images/carousel/Sunday%20Somewhere.jpg"></div>
<div class="image i5"><img src="images/carousel/oliver%20people.jpg"></div>
<div class="image i6"><img src="images/carousel/newmaui.jpg"></div>
<div class="image i7"><img src="images/carousel/Theo1.jpg"></div>
<div class="image i8"><img src="images/carousel/Sunday%20Somewhere.jpg"></div>
</div>
</div>

#wrappercarousel {
perspective: 2500;
-webkit-perspective: 2500;
max-width: 1000px;
width:80%;
margin:6% 0 4% auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#image img{
height: 300px;
max-width: 400px;
width:100%;
margin-bottom: 0px;
}
This should work
You made a common mistake applying width in pixel
Pixel in img's
Pixel will most of the time fail to add up responsive

Thanks for the fiddle
i have edited and fix , hope this one helps you
#wrappercarousel {
perspective: 2500px;
-webkit-perspective: 2500px;
width: 100%;
margin: 0 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
-webkit-transition: 1s, -webkit-perspective;
transition: 1s, -webkit-perspective;
-o-transition: perspective, 1s;
transition: perspective, 1s;
transition: perspective, 1s, -webkit-perspective;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
overflow-x: hidden;
}
#-webkit-keyframes spin {
from {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
}
#image {
margin: 0 auto;
height: 300px;
width: 50%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 24s infinite linear;
-moz-animation: spin 24s infinite linear;
-o-animation: spin 24s infinite linear;
-webkit-animation: spin 24s infinite linear;
}
.image {
position: absolute;
height: 100%;
width: 50%;
border-radius: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font-size: 20em;
color: #fff;
overflow:hidden
}
#image>.i1 {
transform: translateZ(185px);
-moz-transform: translateZ(185px);
-o-transform: translateZ(185px);
-ms-transform: translateZ(185px);
-webkit-transform: translateZ(185px);
-webkit-perspective: 2500px;
perspective: 2500px;
}
#image>.i2 {
transform: rotateY(45deg) translateZ(185px);
-moz-transform: rotateY(45deg) translateZ(185px);
-o-transform: rotateY(45deg) translateZ(185px);
-ms-transform: rotateY(45deg) translateZ(185px);
-webkit-transform: rotateY(45deg) translateZ(185px);
}
#image>.i3 {
transform: rotateY(90deg) translateZ(185px);
-moz-transform: rotateY(90deg) translateZ(185px);
-o-transform: rotateY(90deg) translateZ(185px);
-ms-transform: rotateY(90deg) translateZ(185px);
-webkit-transform: rotateY(90deg) translateZ(185px);
}
#image>.i4 {
transform: rotateY(135deg) translateZ(185px);
-moz-transform: rotateY(135deg) translateZ(185px);
-o-transform: rotateY(135deg) translateZ(185px);
-ms-transform: rotateY(135deg) translateZ(185px);
-webkit-transform: rotateY(135deg) translateZ(185px);
}
#image>.i5 {
transform: rotateY(180deg) translateZ(185px);
-moz-transform: rotateY(180deg) translateZ(185px);
-o-transform: rotateY(180deg) translateZ(185px);
-ms-transform: rotateY(180deg) translateZ(185px);
-webkit-transform: rotateY(180deg) translateZ(185px);
}
#image>.i6 {
transform: rotateY(225deg) translateZ(185px);
-moz-transform: rotateY(225deg) translateZ(185px);
-o-transform: rotateY(225deg) translateZ(185px);
-ms-transform: rotateY(225deg) translateZ(185px);
-webkit-transform: rotateY(225deg) translateZ(185px);
}
#image>.i7 {
transform: rotateY(270deg) translateZ(185px);
-moz-transform: rotateY(270deg) translateZ(185px);
-o-transform: rotateY(270deg) translateZ(185px);
-ms-transform: rotateY(270deg) translateZ(185px);
-webkit-transform: rotateY(270deg) translateZ(185px);
}
#image>.i8 {
transform: rotateY(315deg) translateZ(185px);
-moz-transform: rotateY(315deg) translateZ(185px);
-o-transform: rotateY(315deg) translateZ(185px);
-ms-transform: rotateY(315deg) translateZ(185px);
-webkit-transform: rotateY(315deg) translateZ(185px);
}
#image>.i9 {
transform: rotateY(360deg) translateZ(185px);
-moz-transform: rotateY(360deg) translateZ(185px);
-o-transform: rotateY(360deg) translateZ(185px);
-ms-transform: rotateY(360deg) translateZ(185px);
-webkit-transform: rotateY(360deg) translateZ(185px);
}
#image img {
height: 100%;
width: 100%;
margin-bottom: 0px;
}
img {
border-radius: 1px;
}
<div class="animated fadeIn " id="wrappercarousel">
<div id="image">
<div class="image i1"><img src="/images/carousel/oliver%20people.jpg"></div>
<div class="image i2"><img src="/images/carousel/newmaui.jpg"></div>
<div class="image i3"><img src="/images/carousel/Theo1.jpg"></div>
<div class="image i4"><img src="/images/carousel/Sunday%20Somewhere.jpg"></div>
<div class="image i5"><img src="images/carousel/oliver%20people.jpg"></div>
<div class="image i6"><img src="images/carousel/newmaui.jpg"></div>
<div class="image i7"><img src="images/carousel/Theo1.jpg"></div>
<div class="image i8"><img src="images/carousel/Sunday%20Somewhere.jpg"></div>
</div>
</div>

css animated icon resize

how you use $ in css
[http://codepen.io/jlong/pen/KBhDf][1]
in the above mentioned link on the 3rd line $heartbeat-size: 10px; I wanted to know how to use this element in the style sheet.

To answer your question, here is the processed CSS result of the scss in your pen:
#-webkit-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#-moz-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#-o-keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
#keyframes heartbeat {
0% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
14% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
28% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
42% {
-moz-transform: rotate(45deg) scale(1.3);
-ms-transform: rotate(45deg) scale(1.3);
-webkit-transform: rotate(45deg) scale(1.3);
transform: rotate(45deg) scale(1.3);
}
70% {
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
body {
text-align: center;
padding: 50px;
}
/* Styles for old versions of IE */
.heartbeat {
font-family: sans-serif;
font-weight: 100;
}
/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
-webkit-animation: heartbeat 1300ms ease 0s infinite normal;
-khtml-animation: heartbeat 1300ms ease 0s infinite normal;
-moz-animation: heartbeat 1300ms ease 0s infinite normal;
-ms-animation: heartbeat 1300ms ease 0s infinite normal;
-o-animation: heartbeat 1300ms ease 0s infinite normal;
animation: heartbeat 1300ms ease 0s infinite normal;
display: inline-block;
position: relative;
overflow: hidden;
text-indent: -9999px;
width: 36px;
height: 36px;
-moz-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
position: absolute;
content: "";
background: #e87;
}
.heartbeat:not(:required):before {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-bottomleft: 12px;
-webkit-border-bottom-left-radius: 12px;
border-bottom-left-radius: 12px;
top: 12px;
left: 0;
width: 36px;
height: 24px;
}
.heartbeat:not(:required):after {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius: 12px;
border-top-left-radius: 12px;
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px;
border-top-right-radius: 12px;
top: 0;
left: 12px;
width: 24px;
height: 12px;
}
<span class="heartbeat">Loading...</span>
To understand the principle...
Using variables in CSS is not possible at the moment and is unlikely to be possible anytime soon.
This is only available using CSS pre-processors, such as less or sass.
jsfiddle and codepen allow you to use scss (sass) in the CSS panel and correctly output the processed CSS when rendering.
sass.js is a library that allows you to use .sass files in <link> tags and processes them into valid CSS at load time.
It is likely that major browsers will soon be capable of processing .scss, .sass or .less files natively and it is already possible by using browser extensions.
This, however, does not mean CSS will ever support variables.

How to animate a rotated DOM element with CSS

Full code is on: https://jsfiddle.net/k1t7gy8L/
I have the following HTML:
<section class="cd-intro">
<div class="cd-intro-content mask-2">
<div class="content-wrapper">
<div class="inner">
<h1>Animated Intro Section</h1>
<p>A collection of text effects for the intro section of your website</p>
<div class="action-wrapper">
Get started
Learn More
</div>
</div>
</div>
</div>
</section>
with the following CSS:
.mask-2.cd-intro-content .content-wrapper {
position: relative;
width: 100%;
max-width: 650px;
margin: 0 auto;
padding: 2em 0;
overflow: hidden;
transform:rotate(45deg);
background-color: #0F0;
}
.mask-2.cd-intro-content .content-wrapper .inner{
transform:rotate(-45deg);
background-color: #F00;
}
.mask-2.cd-intro-content .content-wrapper > div {
position: relative;
z-index: 1;
}
.mask-2.cd-intro-content .content-wrapper,
.mask-2.cd-intro-content .content-wrapper > div {
animation-duration: 3.5s;
animation-delay: 1.1s;
animation-fill-mode: backwards;
}
.mask-2.cd-intro-content .content-wrapper {
animation-name: cd-mask-wrapper;
}
.mask-2.cd-intro-content .content-wrapper > div {
animation-name: cd-mask-content;
}
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
Everything works like a charm: Except that the rotation on transform:rotate(45deg); only takes effect AFTER the animation. Why is that? How can I rotate it prior to the animation?.
My idea idea is to reveal the content with a diagonal line instead of a vertical line.

You have to declare everything on transform. But also you have to note that translate will be rotated, so with the superpower of geometry you can do this:
#keyframes cd-mask-wrapper {
0% {
-webkit-transform: translateX(50%) rotate(45deg);
-moz-transform: translateX(50%) rotate(45deg);
-ms-transform: translateX(50%) rotate(45deg);
-o-transform: translateX(50%) rotate(45deg);
transform: translateX(50%) rotate(45deg);
}
100% {
-webkit-transform: translateX(0) rotate(45deg);
-moz-transform: translateX(0) rotate(45deg);
-ms-transform: translateX(0) rotate(45deg);
-o-transform: translateX(0) rotate(45deg);
transform: translateX(0) rotate(45deg);
}
}
#keyframes cd-mask-content {
0% {
-webkit-transform: rotate(-45deg) translateX(-100%);
-moz-transform: rotate(-45deg) translateX(-100%);
-ms-transform: rotate(-45deg) translateX(-100%);
-o-transform: rotate(-45deg) translateX(-100%);
transform: rotate(-45deg) translateX(-100%);
}
100% {
-webkit-transform: rotate(-45deg) translateX(0);
-moz-transform rotate(-45deg) translateX(0);
-ms-transform: rotate(-45deg) translateX(0);
-o-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
}
Yes. IT is important to translate then rotate the wrapper. And rotate and then translate the content. Test it =)

CSS animation with spin from center

I am using css animations to try and get the green lines to spin around the red circle perfectly alined. I have linked to my fiddle where I have tried to get it working. any advice would be much appropriated. thanks!
[fiddle][1]
[1]: http://jsfiddle.net/3s07jbL4/3/
.badge {
position: relative;
width: 400px;
height:400px;
border-radius: 50%;
transform: rotate(-50deg);
background:red;
}
span {
font: 16px Monaco,monospace;
height: 240px;
position: absolute;
width: 34px;
left: 0px;
top: 0px;
transform-origin: center bottom 0px;
clip: rect(0px, 38px, 63px, 0px);
background:green;
}
span img {
width: 100%;
}
.day1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.day2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.day3 {
-webkit-transform: rotate(24deg);
-moz-transform: rotate(24deg);
-ms-transform: rotate(24deg);
-o-transform: rotate(24deg);
transform: rotate(24deg);
}
.day4 {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.day5 {
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
transform: rotate(48deg);
}
.day6 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.day7 {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.day8 {
-webkit-transform: rotate(84deg);
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-o-transform: rotate(84deg);
transform: rotate(84deg);
}
.day9 {
-webkit-transform: rotate(96deg);
-moz-transform: rotate(96deg);
-ms-transform: rotate(96deg);
-o-transform: rotate(96deg);
transform: rotate(96deg);
}
.day10 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.day11 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.day12 {
-webkit-transform: rotate(132deg);
-moz-transform: rotate(132deg);
-ms-transform: rotate(132deg);
-o-transform: rotate(132deg);
transform: rotate(132deg);
}
.day13 {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.day14 {
-webkit-transform: rotate(156deg);
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-o-transform: rotate(156deg);
transform: rotate(156deg);
}
.day15 {
-webkit-transform: rotate(168deg);
-moz-transform: rotate(168deg);
-ms-transform: rotate(168deg);
-o-transform: rotate(168deg);
transform: rotate(168deg);
}
.day16 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.day17 {
-webkit-transform: rotate(192deg);
-moz-transform: rotate(192deg);
-ms-transform: rotate(192deg);
-o-transform: rotate(192deg);
transform: rotate(192deg);
}
.day18 {
-webkit-transform: rotate(204deg);
-moz-transform: rotate(204deg);
-ms-transform: rotate(204deg);
-o-transform: rotate(204deg);
transform: rotate(204deg);
}
.day19 {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
}
.day20 {
-webkit-transform: rotate(228deg);
-moz-transform: rotate(228deg);
-ms-transform: rotate(228deg);
-o-transform: rotate(228deg);
transform: rotate(228deg);
}
.day21 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.day22 {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
}
.day23 {
-webkit-transform: rotate(264deg);
-moz-transform: rotate(264deg);
-ms-transform: rotate(264deg);
-o-transform: rotate(264deg);
transform: rotate(264deg);
}
.day24 {
-webkit-transform: rotate(276deg);
-moz-transform: rotate(276deg);
-ms-transform: rotate(276deg);
-o-transform: rotate(276deg);
transform: rotate(276deg);
}
.day25 {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.day26 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
.day27 {
-webkit-transform: rotate(312deg);
-moz-transform: rotate(312deg);
-ms-transform: rotate(312deg);
-o-transform: rotate(312deg);
transform: rotate(312deg);
}
.day28 {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
}
.day29 {
-webkit-transform: rotate(336deg);
-moz-transform: rotate(336deg);
-ms-transform: rotate(336deg);
-o-transform: rotate(336deg);
transform: rotate(336deg);
}
.day30 {
-webkit-transform: rotate(348deg);
-moz-transform: rotate(348deg);
-ms-transform: rotate(348deg);
-o-transform: rotate(348deg);
transform: rotate(348deg);
}
.day31 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.badge
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
width: 400px;
height: 400px;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
<div id="spin">
<div class="badge">
<span class="day1">
1
</span>
<span class="day2">
1
</span>
<span class="day3">
1
</span>
<span class="day4">
1
</span>
<span class="day5">
1
</span>
<span class="day6">
1
</span>
<span class="day7">
1
</span>
<span class="day8">
1
</span>
<span class="day9">
1
</span>
<span class="day10">
1
</span>
<span class="day11">
1
</span>
<span class="day12">
1
</span>
<span class="day13">
1
</span>
<span class="day14">
1
</span>
<span class="day15">
1
</span>
<span class="day16">
1
</span>
<span class="day17">
1
</span>
<span class="day18">
1
</span>
<span class="day19">
1
</span>
<span class="day20">
1 </span>
<span class="day21">
1 </span>
<span class="day22">
1
</span>
<span class="day23">
1
</span>
<span class="day24">
1
</span>
<span class="day25">
1
</span>
<span class="day26">
1
</span>
<span class="day27">
1
</span>
<span class="day28">
1
</span>
<span class="day29">
1
</span>
<span class="day30">
1
</span>
</div>
</div>

To center all of the day elements horizontally, add left: 50% and margin-left: -17px to the span elements. (-17px is because they are 34px wide, and 17 is half of 34).
To center them vertically, add margin-top: -40px to them. This is because their heights are kind of arbitrary, and adding this will correct it.
http://jsfiddle.net/3s07jbL4/15/

Resources