Sorry, I'm new to css animations so maybe it's studpid ;) So I got a overlay div I want to animate from top to bottom (fixed at top) and then scale down (fixed at the bottom) but the animations jumps some sequences. I really don't know why. here is a fiddle https://jsfiddle.net/mzd7rqqL/
I think you can see what I try to achieve!
CSS
.overlay {
background: #00b2c0;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: infinite 2s;
animation: infinite 2s;
.off {
width: 0;
height: 0;
animation: none !important;
-webkit-animation: none !important;
}
}
#keyframes rolldown {
0% {transform: scaleY(0); transform-origin: left top;}
50% { transform: scaleY(1); }
100% {transform: scaleY(0); transform-origin: left bottom;}
}
.rolldown {
-webkit-animation-name: rolldown;
animation-name: rolldown;
}
HTML
<div class="overlay rolldown"></div>
thanks for any help!
You said:
...the div should be "fixed" to the top for the first 50% to scale from top to down and then it should be "fixed" at the bottom and scale down...
To solve this, I've added two steps keyframes: rolldown1 and rolldown2. First, it will animate top to down, wait 3 seconds and then animate to collapse and disappear.
Solution:
.overlay {
background: #00b2c0;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#keyframes rolldown1 {
0% {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
100% {
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
#keyframes rolldown2 {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
50% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
.rolldown {
/* here, it will wait for 3 seconds before collapsing */
-webkit-animation:
rolldown1 1s linear 0s 1 normal forwards,
rolldown2 1s linear 3s 1 normal forwards
;
animation:
rolldown1 1s linear 0s 1 normal forwards,
rolldown2 1s linear 3s 1 normal forwards
;
}
<div class="overlay rolldown"></div>
Your CSS has error, try the following CSS
.overlay {
background: #00b2c0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: infinite 2s;
animation: infinite 2s;
}
.off {
width: 0;
height: 0;
animation: none !important;
-webkit-animation: none !important;
}
#keyframes rolldown {
0% {
transform: scaleY(0);
transform-origin: left top;
}
50%
{
transform: scaleY(1);
}
100% {
transform: scaleY(0);
transform-origin: left bottom;
}
}
.rolldown {
-webkit-animation-name: rolldown;
animation-name: rolldown;
}
Maybe you should set height in 50% of "rolldown", try this:
.overlay {
background: #00b2c0;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: infinite 2s;
animation: infinite 2s;
}
#keyframes rolldown {
0% {transform: scaleY(0); transform-origin: left top;}
50% { transform: scaleY(1); height: 10%; }
100% {transform: scaleY(0); transform-origin: left bottom; }
}
Try this
JSFiddle
.container{
background:#00b2c0;
height:1000px;
-webkit-animation: expand 5s;
}
#-webkit-keyframes expand{
0%{height:0px}
100%{height:1000px}
}
so, i can't got it to work with scale but I could get it working with translate!
https://jsfiddle.net/mh9j763r/1/
.overlay {
background: #00b2c0;
position: absolute;
top: -100%; left: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-animation: infinite 2s;
animation: infinite 2s;
}
#keyframes rolldown {
0% {transform: translateY(0);}
50% { transform: translateY(100%);}
100% { transform: translateY(200%);}
}
.rolldown {
-webkit-animation-name: rolldown;
animation-name: rolldown;
}
Related
I need to make an animation of a moving car from left to right and then hide the picture and another one of the same, but from right to left.
Can someone help me with this?
This is my code for now:
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: calc(100% - 100px);
}
100% {
left: 0;
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
Place the image in a div that has overflow.
Animate over transform: rotateY and left.
I used a div with a car emoticon, instead of an image.
.car-movement {
overflow: hidden;
font-size: 40px;
height: 50px;
}
.car-movement > .car {
position: relative;
display: inline-block;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
transform: rotateY(180deg);
left: -100px;
}
50% {
transform: rotateY(180deg);
left: 100%;
}
51% {
transform: rotateY(0deg);
left: calc(100% + 100px);
}
100% {
transform: rotateY(0deg);
left: -100px;
}
<div class="car-movement">
<div class="car">🚕</div>
</div>
If I understood correctly, you want that car would ride from left to right and hide on the right side of the window?
Then you should edit this code part:
0% {
left: -100px;
}
50% {
left: calc(100% - 100px);
}
Instead of 100px write car image length.
Also before all code, you should write this for the body:
body {
overflow-x: hidden;
}
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
left: calc(100% - 100px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
left: 0;
-webkit-transform: rotateY(0deg);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
If you give your keyframes a couple of intermediate steps you can not only get the car going from left to right and back again but you can get it to turn round before doing the right to left bit.
Obviously you need to put in your car svg image to get the full effect.
.car-movement {
position: absolute;
top: 65%;
left: 0;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
left: 0;
transform: translate(-100%);
}
50% {
left: 100%;
transform: translate(0);
}
50.5% {
transform: rotateY(180deg) translate(0);
}
99.5% {
left: 0;
transform: rotateY(180deg) translate(0);
}
100% {
transform: rotateY(0deg) translate(0);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
I am trying to animate a SVG from 0deg to 360deg. But if i use the transform: rotate property then the svg loses its position and its not centre aligned when the browser resizes. I used transform-origin to 50%. But the svg loses its position.
HTML :
<div id="hexagon-spinner">
<Hexagon className="hexagon-loader" viewBox="0 0 65.103 75.174" />
</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
}
.hexagon-loader {
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
First of all, when it is 100%, you should define 360 degrees, not 359 degrees.
100% {
transform: rotate(359deg); // ->> 360deg
}
What to do about the average,
#keyframes spin {
0% {
transform: rotate(0deg);
transform-origin: -50% 50%;
}
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Finally,
If we need to shorten the code (since it will start with 0deg by default), if we enter only the parameter 100%, there will be no problem.
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Simple Code Snippet
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
}
<div>LOADING</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
display: flex;
align-items:center;
justify-content: center;
}
.hexagon-loader {
background-color: purple;
height: 40px;
width: 40px;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
display: inline-block;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div id="hexagon-spinner">
<div class="hexagon-loader"></div>
</div>
When we shift the element with the translate (to center it) we naturally distort its center. Therefore it will not work properly.
I suggest a solution for this. (flexbox) is to use. You will see an example below.
Note: (Don't forget to remove Absolute and Transform Origin features)
So I'm aiming to have two circles meet from either side of the screen and meet in the middle to perform the second half of the animation (scaling and opacity change).
But by setting the initial keyframe and last using vw they don't meet in the middle - since the vw value is relative to the left side of the div and not the centre (I have used vw as I need this to be responsive). So, what happens is that the left sides of the circle meet in the centre.
Does anyone know a simple fix to this using just css? I am newish to coding, so if the answer is obvious I apologise.
Here is my code:
#keyframes left {
0% {
transform: translate3d(0vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-in;
}
60% {
transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
opacity: 0%;
animation-timing-function: ease-out;
}
}
#keyframes right {
0% {
transform: translate3d(100vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-in;
}
60% {
transform: translate3d(50vw, 50%, 0) scale3d(1, 1, 1);
opacity: 50%;
animation-timing-function: ease-out;
}
100% {
transform: translate3d(50vw, 50%, 0) scale3d(2, 2, 1);
opacity: 0%;
animation-timing-function: ease-out;
}
}
.circleleft {
overflow: hidden;
position: absolute;
background: white;
border-radius: 50%;
width: 500px;
height: 500px;
animation: left 2s;
animation-fill-mode: forwards;
}
.circleright {
overflow: hidden;
position: absolute;
background: white;
border-radius: 50%;
width: 500px;
height: 500px;
animation: right 2s;
animation-fill-mode: forwards;
}
<div style="width:100vw; height:100vh; background-color:#87827E">
<div class="circleleft"></div>
<div class="circleright"></div>
</div>
You can see it in use here too: https://ruairimadine.co.uk/sudoroux
One trick is to initially position both circles in the center and the animation/translation will offset them from the left or right.
I optimized the code to only use pseudo-elements and make it easier to understand:
body {
margin: 0;
height: 100vh;
background-color: #87827E;
overflow: hidden;
position:relative;
}
body::before,
body::after{
content:"";
position: absolute;
top: calc(50% - 25vmin);
left:calc(50% - 25vmin);
background: white;
opacity: 50%;
border-radius: 50%;
width: 50vmin;
height: 50vmin;
animation: move 2s forwards;
}
/* 50vw : half the screen width | 25vmin half the circle width*/
body::before { transform:translateX(calc( 50vw + 25vmin)); }
body::after { transform:translateX(calc(-50vw - 25vmin)); }
#keyframes move {
60% {
transform: translateX(0) scale(1);
opacity: 50%;
}
100% {
transform: translateX(0) scale(2);
opacity: 0%;
}
}
In this example the circles size is stored in the root variable --circle-size: 100px;. So the circles can be centered with top and left easily. The animation uses the properties left (position), opacity and transform: scale (scaling).
setTimeout(()=>{
document.querySelector('.circle-left').classList.add('circle__animated');
document.querySelector('.circle-right').classList.add('circle__animated');
}, 1000);
:root{
--circle-size: 100px;
}
.circle{
position: absolute;
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
top: calc(50% - var(--circle-size)/2);
}
.circle.circle-left{
background: red;
left: 0;
animation: left 2s;
animation-fill-mode: forwards;
}
.circle.circle-right{
background: green;
left: calc(100% - var(--circle-size));
animation: right 2s;
animation-fill-mode: forwards;
}
#keyframes left {
0% {
left: 0;
opacity: 1;
transform: scale(1);
animation-timing-function: ease-in;
}
60% {
left: calc(50% - var(--circle-size)/2);
opacity: 0.5;
transform: scale(1);
animation-timing-function: ease-out;
}
100% {
left: calc(50% - var(--circle-size)/2);
opacity: 0;
transform: scale(5);
animation-timing-function: ease-out;
}
}
#keyframes right {
0% {
left: calc(100% - var(--circle-size));
opacity: 1;
transform: scale(1);
animation-timing-function: ease-in;
}
60% {
left: calc(50% - var(--circle-size)/2);
opacity: 0.5;
transform: scale(1);
animation-timing-function: ease-out;
}
100% {
left: calc(50% - var(--circle-size)/2);
opacity: 0;
transform: scale(5);
animation-timing-function: ease-out;
}
}
<div style="position: absolute; top:0; left: 0; width:100vw; height:100vh; background-color:#87827E; padding: 0; margin: 0; overflow: hidden;">
<div class="circle circle-left"></div>
<div class="circle circle-right"></div>
</div>
I have made a heart using CSS. I was just looking for a way to make it beat / pulsate.
Here is the code (fiddle):
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
-webkit-animation: heart 1s linear infinite;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>
What a lovely post to begin the evening with.
Sure, this is possible with pure CSS - you are likely interested in animations:
CSS
#heart-container {
width: 100px;
height: 90px;
animation: pulsate 0.5s infinite;
}
#keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Working example on JSFiddle.
Just wrap your lovely heart in #heart-container, and you are good to go. Also, don't forget to include the vendor specific prefixes where necessary.
FYI, the animation shorthand property - similar to transition - also accepts an easing setting (timing-function), like ease-in-out. Or, use animation-timing-function.
See the animation easing example on JSFiddle.
Note
For anyone wondering why I suggested this approach instead of an alternating animation, this approach synergizes with easing functions pretty well.
The animation property is your friend. :)
#heart {
position: relative;
width: 100px;
height: 90px;
-webkit-animation: heartbeat .8s ease-in-out 0s infinite;
-moz-animation: heartbeat .8s ease-in-out 0s infinite;
animation: heartbeat .8s ease-in-out 0s infinite;
transform: scale(1);
}
#-moz-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#-webkit-keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#keyframes heartbeat {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id = "heart"></div>
Create a beating heart icon using font-awesome, JQuery and CSS animations.
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale(.75);
}
100%
{
transform: scale( 1 );
}
}
create beating heart
I have been looking to create a similar effect to https://www.google.com/events/io/logistics (the inspiration) however the 4 elements are not rendering correctly, one element jumps over the next. I have tried several iterations of this with no avail. You can see in this Fiddle one side jumps over the next. I have changed the perspective to see this more clearly.
http://jsfiddle.net/368Rc/ (UPDATED:7/11)
<div style="height: 300px;margin-top:40px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="back-pane">back</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
</div>
and CSS
/*************** ANIMATIONS ***************/
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
#-ms-keyframes spin {
from { ms-transform: rotateY(0); }
to { ms-transform: rotateY(360deg); }
}
#keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
#-webkit-keyframes spin-vertical {
from { -webkit-transform: rotateX(0); }
to { -webkit-transform: rotateX(-360deg); }
}
#-ms-keyframes spin-vertical {
from { ms-transform: rotateX(0); }
to { ms-transform: rotateX(-360deg); }
}
#keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
-webkit-perspective: 1800px;
-webkit-perspective-origin: 0% 1000px;
-moz-perspective: 1800px;
-moz-perspective-origin: 0% 1000px;
-ms-perspective: 1800px;
-ms-perspective-origin: 0% 1000px;
perspective: 1800px;
perspective-origin: 0% 1000px;
}
.cube {
position: relative;
width: 152px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 20s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 20s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 20s infinite linear;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}
.cube div {
position: absolute;
width: 152px;
height: 202px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");
-webkit-transform: translateZ(10px) rotateY(90deg);
-webkit-transform-origin: 50% 50% 0;
-moz-transform: translateZ(10px) rotateY(90deg);
-moz-transform-origin: 50% 50% 0;
-ms-transform: translateZ(10px) rotateY(90deg);
-ms-transform-origin: 50% 50% 0;
transform: translateZ(10px) rotateY(90deg);
transform-origin: 50% 50% 0;
left:10px;
}
.depth div.right-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 200% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 200% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 200% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 200% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-r.svg");
}
.depth div.left-pane {
-webkit-transform:rotateY(0deg) translateX(0px);
-webkit-transform-origin: 50% 0% 0;
-moz-transform:rotateY(0deg) translateX(0px);
-moz-transform-origin: 50% 0% 0;
-ms-transform:rotateY(0deg) translateX(0px);
-ms-transform-origin: 50% 0% 0;
transform:rotateY(0deg) translateX(0px);
transform-origin: 50% 0% 0;
background: url("http://doggydish.com/PROJECTS/balloon-blue-l.svg");
}
.depth div.front-pane {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
Note: I'm testing on Firefox/Chrome, there may be issues on SAFARI.
Currently chrome doesn't support standard properties of transform.
so you need to use prefix to support all your browsers, even in key-frames.
i have updated one of your key-frames, to show how it works, so fix other keyframes as you want.
DEMO FIDDLE
.balloon-cage2 {
display:block;
position:relative;
left:400px;
}
.balloon-green-r {
background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr 6s linear infinite;
-moz-animation: rotateyr 6s linear infinite;
animation: rotateyr 6s linear infinite;
margin: 0 auto;
position: absolute;
background-color:#1abc9c;
}
.balloon-green-l {
background: url(http://doggydish.com/PROJECTS/balloon-green-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl 6s linear infinite;
-moz-animation: rotateyl 6s linear infinite;
animation: rotateyl 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-l {
background: url(http://doggydish.com/PROJECTS/balloon-blue-l.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: left;
-webkit-animation: rotateyl2 6s linear infinite;
-moz-animation: rotateyl2 6s linear infinite;
animation: rotateyl2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
.balloon-blue-r {
background: url(http://doggydish.com/PROJECTS/balloon-blue-r.svg);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
width: 152px;
height: 202px;
text-align: right;
-webkit-animation: rotateyr2 6s linear infinite;
-moz-animation: rotateyr2 6s linear infinite;
animation: rotateyr2 6s linear infinite;
margin: 0 auto;
position: absolute;
}
#-webkit-keyframes rotateyr {
0% {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 50% 0% 0;
}
100% {
-webkit-transform: rotateY(360deg);
-webkit-transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0% 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyr2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0% 0;
}
}
#keyframes rotateyl {
0% {
transform: rotateY(0deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(360deg);
transform-origin: 50% 0 0;
}
}
#keyframes rotateyl2 {
0% {
transform: rotateY(90deg);
transform-origin: 50% 0 0;
}
100% {
transform: rotateY(450deg);
transform-origin: 50% 0 0;
}
}