I am trying to create a pulse effect around this button.
Unfortunately its not working... and I can't find the error.
#pulse {
width: 50px;
height: 100%;
}
#show {
float: left;
margin-top: -200px;
margin-left: 10px;
border: none;
height: 40px;
width: 40px;
box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
border-radius: 50%;
background: none;
cursor: pointer;
background-image: url('bilder/showleftside.svg');
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
#keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
opacity: 0.3;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
<div id="pulse">
<button id="show" type="button" onclick=""></button>
</div>
You defined a animation with name pulse. What this pulse animation is supposed to do is missing in your code. Add keyframes to define your animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
#pulse {
width: 50px;
height: 100%;
}
#show {
float: left;
margin: 20px;
border: 1px solid #ddd;
height: 40px;
width: 40px;
box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
border-radius: 50%;
background: none;
cursor: pointer;
background-image: url('bilder/showleftside.svg');
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<div id="pulse">
<button id="show" type="button">X</button>
</div>
Related
#keyframes gray {
0% { transform: matrix(1, 0, 0, 1, 0, 0) }
100% { transform: matrix(-1, 0, 0, -1, 20, 20) }
}
#keyframes lightblue {
0% { transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px); }
100% { transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px); }
}
.gray {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: gray;
transform-origin: 0px 0px;
animation: gray linear 1s infinite;
}
.lightblue {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: lightblue;
transform-origin: 0px 0px;
animation: lightblue linear 1s infinite;
}
<div class="gray"></div>
<div class="lightblue"></div>
As I known
transform: matrix(1, 0, 0, 1, 0, 0);
is equal to
transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px);
and
transform: matrix(-1, 0, 0, -1, 20, 20)
is equal to
transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px);
when I use above css rule directly to element, anything works fine.
but after I use above css rule in keyframes, things goes wrong.
the gray element's rotate angle is different from the lightblue one.
I test the code in chrome 71
The issue is how the browser will handle interpolation. Both matrix are fine and they are the same as the transform defined but the interpolation between both is not the same.
Use forwards instead of infinite to see that both will start and end at the same state:
#keyframes gray {
0% { transform: matrix(1, 0, 0, 1, 0, 0) }
100% { transform: matrix(-1, 0, 0, -1, 20, 20) }
}
#keyframes lightblue {
0% { transform: translate(10px, 10px) rotate(0deg) translate(-10px, -10px); }
100% { transform: translate(10px, 10px) rotate(180deg) translate(-10px, -10px); }
}
.gray {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: gray;
transform-origin: 0px 0px;
animation: gray linear 2s 0.5s forwards;
border-right:2px solid;
}
.lightblue {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: lightblue;
transform-origin: 0px 0px;
animation: lightblue linear 2s 0.5s forwards;
border-right:2px solid;
}
<div class="gray"></div>
<div class="lightblue"></div>
Basically, the matrix will first get decomposed into transformation then will get interpolated. so the first one matrix(1, 0, 0, 1, 0, 0) which is the indentity will get transformed to a null transformation (ex scale(1,1) or rotate(0)) and not translate(10px, 10px) rotate(0deg) translate(-10px, -10px) like you may think. then the second one matrix(-1, 0, 0, -1, 20, 20) can be transformed to scale(-1,-1) translate(-20px,-20px). Again it won't be translate(10px, 10px) rotate(180deg) translate(-10px, -10px).
Now it's clear that the interpolation (the intermediate states) will not be the same for both animation. This is due to the fact that the browser will not use the same transformations you used to define the matrix. In theory, There is a infinite number of combination and the browser will use it's own algorithm to find the one he will use which will not necessarily be the one you defined.
You can check this link for more details : https://drafts.csswg.org/css-transforms/#interpolation-of-transforms
Here is an example how we can make both the same:
#keyframes gray {
0% { transform: matrix(1, 0, 0, 1, 0, 0) }
100% { transform: matrix(-1, 0, 0, -1, 20, 20) }
}
#keyframes lightblue {
0% { transform: scale(1,1) }
100% { transform:scale(-1,-1) translate(-20px, -20px) ; }
}
.gray {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: gray;
transform-origin: 0px 0px;
animation: gray linear 2s 0.5s infinite;
border-right:2px solid;
}
.lightblue {
float: left;
margin-left: 50px;
width: 20px;
height: 20px;
background: lightblue;
transform-origin: 0px 0px;
animation: lightblue linear 2s 0.5s infinite;
border-right:2px solid;
}
<div class="gray"></div>
<div class="lightblue"></div>
I want to perform some div animation with intervals. In the first time the animation will play, and then it will be delayed, and then (from the second time) there will be an interval. After that, the animation will be played every X seconds.
This is what I got so far, but the animation starts after delay:
#-webkit-keyframes shake {
10%,
90% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
-webkit-transform: translate3d(-4px, 0, 0);
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
}
}
#keyframes shake {
10%,
90% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
-webkit-transform: translate3d(-4px, 0, 0);
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
}
}
.error-container {
position: absolute;
left: auto;
border-collapse: separate;
margin: 0;
padding: 2px 10px;
list-style: none;
color: #ffffff;
font-size: 12px;
font-weight: 600;
background: #d9534f;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: none;
z-index: 100;
&.active {
display: block;
-webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both 4s infinite;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
}
Is it possible without any JavaScript?Thanks.
Update: here is a demo: [demo][1]
Here you go. What I did is I changed the code so that complete animation ends at 20% and after that it will do nothing till 100%. For more details, visit this link
NOTE: You can clone the webkit to keyframes code as well. I removed it
#-webkit-keyframes shake {
2%,
18% {
-webkit-transform: translate3d(-1px, 0, 0);
transform: translate3d(-1px, 0, 0);
}
4%,
16% {
-webkit-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
6%,
10%,
14% {
-webkit-transform: translate3d(-4px, 0, 0);
transform: translate3d(-4px, 0, 0);
}
8%,
12% {
-webkit-transform: translate3d(4px, 0, 0);
transform: translate3d(4px, 0, 0);
}
100%{
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
}
.error-container {
position: absolute;
left: auto;
border-collapse: separate;
margin: 0;
padding: 2px 10px;
list-style: none;
color: #ffffff;
font-size: 12px;
font-weight: 600;
background: #d9534f;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
display: none;
z-index: 100;
&.active {
display: block;
animation: shake 4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
}
You can change iteration on animation-duration
here is example
#import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
* {
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: purple;
font-family: 'Montserrat', sans-serif;
}
html, body {
height: 100%;
}
button {
background: #333;
color: #fff;
border-radius: 40px;
padding: 15px 30px;
border: 0;
overflow: hidden;
width: 200px;
transition:
all 1.2s,
border 0.5s 1.2s,
box-shadow 0.3s 1.5s;
white-space: nowrap;
text-indent: 23px;
font-weight: bold;
}
span {
display: inline-block;
transform: translateX(300px);
font-weight: normal;
opacity: 0;
transition:
opacity 0.1s 0.5s,
transform 0.4s 0.5s;
}
button:hover {
text-indent: 0;
background: #55706D;
color: #FFE8A3;
width: 250px;
}
button:hover span {
transform: translateX(0);
opacity: 1;
}
<button>
Animate
<span>After Delay</span>
</button>
I have a sequence of animations, each delayed to appear one after the other.
Sequence:
Logo
h1
hr
background starts scrolling upwards
Using animation-fill-mode: backwards each element does not appear on the page until it is animated-in. I would like the same to happen to the background. So it does not appear until all the other animations are complete. The background would then start scrolling upwards.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
display: block;
background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: background;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
100% {
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
If you want the background to just appear, try this.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
animation-delay: 5s;
display: block;
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: forwards;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
0% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
}
100% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
I have a code font-icon animation my problem is when i run in local server animation does'nt works it works only in http://codepen.io/TimPietrusky/pen/ELuiG
and even tried in
http://jsfiddle.net/qjo7cf3j/
#import url(http://weloveiconfonts.com/api/?family=maki);
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background: #333;
}
[class*="maki-"]:before{
font-family: 'maki', sans-serif;
}
*:after {
position: absolute;
top: 0;
right: 0;
content: '';
z-index: -1;
width: 0;
height: 0;
}
[class*="maki-"] {
position: absolute;
margin: 0;
color: #fff;
font-size: 2em;
}
.wrapper {
height: 140%;
width: 120%;
transform: rotate(-3deg) translate(-10%, -15%);
}
.night {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
animation: night 45s infinite forwards;
}
#keyframes night {
0%, 30%, 100% {background:rgba(0, 0, 0, 0);}
55% {background: rgba(0, 0, 0, .6);}
}
.sky {
position: relative;
z-index: 0;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
height: 50%;
width: 100%;
animation: rollin-bg 25s linear infinite forwards;
}
.ground {
position: absolute;
z-index: 1;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
height: 50%;
width: 100%;
animation: rollin-bg 7s linear infinite forwards;
}
#keyframes rollin-bg {
0% {background-position: 100%;}
100% {background-position: 0;}
}
.sun {
position: absolute;
z-index: 1;
left: 50%;
top: 10%;
width: 2em;
height: 2em;
font-size: 4em;
line-height: 1;
animation: circle 45s linear infinite;
transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
color: rgba(240, 180, 0, .2);
text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
animation: inner-circle 45s linear infinite;
}
#keyframes circle {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#keyframes inner-circle {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.maki-bicycle {
left: 50%;
z-index: 4;
margin: -.85em 0 0 -.5em;
color: rgba(30, 30, 140, .95);
}
.maki-tree-1[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 6;
animation: rollin 5s linear infinite;
font-size: 2.4em;
color: rgba(0, 110, 0, 1);
}
.maki-tree-1[data-child="2"] {
margin: -1em 0 0 85%;
z-index: 2;
animation: rollin 12s linear infinite;
font-size: 1.6em;
color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
margin: -1em 0 0 25%;
z-index: 2;
animation: rollin 17s linear infinite;
font-size: 1.2em;
color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
margin: .25em 0 0 5%;
z-index: 6;
animation: rollin 12s linear infinite reverse;
font-size: 10em;
color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
right: -3em;
content: '\e82a \e82a \e82a \e82a \e82a';
font: .2em 'Maki', sans-serif;
letter-spacing: .2em;
width: 3em;
color: rgba(0, 0, 0, .6);
box-shadow:
0 .45em 0 .75em rgba(255, 255, 255, .4),
1em .35em 0 .75em rgba(255, 255, 255, .4),
2.25em .25em 0 1.05em rgba(255, 255, 255, .4)
;
border-radius: 50%;
transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
margin: -.35em 0 0 5%;
z-index: 5;
animation: rollin 22s linear infinite;
font-size: 4em;
color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 3;
animation: rollin 6s linear infinite;
font-size: 7em;
color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
margin: -1em 0 0 5%;
z-index: 2;
animation: rollin 14s linear infinite;
font-size: 4em;
color: rgba(0, 120, 120, .4);
}
.maki-heliport {
margin: -3.5em 0 0 2em;
z-index: 1;
color: rgba(30, 30, 30, .45);
font-size: 1.25em;
animation: rollin 26s linear infinite reverse 2s;
}
#keyframes rollin {
0% {margin-left:105%}
100% {margin-left:-15%;}
}
<div class="night"></div>
<div class="wrapper">
<div class="sun">
<div class="maki-fast-food"></div>
</div>
<div class="sky"></div>
<span class="maki-bicycle"></span>
<span class="maki-tree-1" data-child="1"></span>
<span class="maki-tree-1" data-child="2"></span>
<span class="maki-tree-1" data-child="3"></span>
<span class="maki-giraffe"></span>
<span class="maki-grocery-store"></span>
<span class="maki-commerical-building" data-child="1"></span>
<span class="maki-commerical-building" data-child="2"></span>
<span class="maki-heliport"></span>
<div class="ground"></div>
</div>
The reason why the animation doesn't work at all in your version, is because the animation properties need prefixes like -webkit- in some browsers.
In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select 'neither', you'll see that the CodePen example also doesn't work anymore, because the (S)CSS doesn't contain the required prefixed version for the CSS attributes.
So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).
A similar issue (for a different set of properties) was asked for and answered here.
any idea why this doesn't work in any other browsers apart from Firefox?
I have tried chrome, safari and IE (obviously, it won't work, because nothing does with IE).
thanks!
the SASS code is below, in case it helps:
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
$w: 200;
$h: 180;
$duration: 300ms;
$timing-fn: ease;
$turquoise: #1ABC9C;
$wet-asphalt: #34495E;
$midnight-blue: #2C3E50;
$clouds: #ECF0F1;
* {box-sizing: border-box}
body {background-color: #fff}
h1 {
margin: 0 auto 5px;
text-align: center;
}
h3 {font-family: 'Bree Serif', serif}
.container {
width: 840px;
margin: 0 auto;
}
header {
font-family: 'Bree Serif', serif;
text-align: center;
margin: 50px 0 25px;
color: $wet-asphalt;
p {
margin: 0;
color: transparentize($wet-asphalt, .6);
}
}
ul {
padding: 0;
margin: 0 0 50px;
&:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
li {
position: relative;
overflow: hidden;
border-radius: 4px;
list-style: none;
float: left;
width: #{$w}px;
height: #{$h}px;
margin: 5px;
padding: 0;
perspective: 500px;
a {
display: inline-block;
vertical-align: top;
text-decoration: none;
border-radius: 4px;
}
h3 {
margin: 0;
font-size: 16px;
color: transparentize(#fff, .1);
}
p {
font-size: 12px;
line-height: 1.5;
color: transparentize(#fff, .2);
}
.normal {
width: 100%;
height: 100%;
background-color: $clouds;
color: transparentize($wet-asphalt, .4);
box-shadow: inset 0 2px 20px darken($clouds, 2);
text-align: center;
font-size: 50px;
line-height: #{$h}px;
svg {
pointer-events: none;
width: 50px;
path {
fill: transparentize($wet-asphalt, .8);
}
}
}
.info {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-radius: 4px;
pointer-events: none;
background-color: transparentize($turquoise, .1);
transform: rotate3d(1, 0, 0, 90deg);
}
}
.in-top .info {
transform-origin: 50% 0%;
animation: in-top $duration $timing-fn 0ms 1 forwards;
}
.in-right .info {
transform-origin: 100% 0%;
animation: in-right $duration $timing-fn 0ms 1 forwards;
}
.in-bottom .info {
transform-origin: 50% 100%;
animation: in-bottom $duration $timing-fn 0ms 1 forwards;
}
.in-left .info {
transform-origin: 0% 0%;
animation: in-left $duration $timing-fn 0ms 1 forwards;
}
.out-top .info {
transform-origin: 50% 0%;
animation: out-top $duration $timing-fn 0ms 1 forwards;
}
.out-right .info {
transform-origin: 100% 50%;
animation: out-right $duration $timing-fn 0ms 1 forwards;
}
.out-bottom .info {
transform-origin: 50% 100%;
animation: out-bottom $duration $timing-fn 0ms 1 forwards;
}
.out-left .info {
transform-origin: 0% 0%;
animation: out-left $duration $timing-fn 0ms 1 forwards;
}
#keyframes in-top {
from {transform: rotate3d(-1, 0, 0, 90deg);}
to {transform: rotate3d(0, 0, 0, 0deg);}}
#keyframes in-right {
from {transform: rotate3d(0, -1, 0, 90deg);}
to {transform: rotate3d(0, 0, 0, 0deg);}}
#keyframes in-bottom {
from {transform: rotate3d(1, 0, 0, 90deg);}
to {transform: rotate3d(0, 0, 0, 0deg);}}
#keyframes in-left {
from {transform: rotate3d(0, 1, 0, 90deg);}
to {transform: rotate3d(0, 0, 0, 0deg);}}
#keyframes out-top {
from {transform: rotate3d(0, 0, 0, 0deg);}
to {transform: rotate3d(-1, 0, 0, 102deg);}}
#keyframes out-right {
from {transform: rotate3d(0, 0, 0, 0deg);}
to {transform: rotate3d(0, -1, 0, 102deg);}}
#keyframes out-bottom {
from {transform: rotate3d(0, 0, 0, 0deg);}
to {transform: rotate3d(1, 0, 0, 101deg);}}
#keyframes out-left {
from {transform: rotate3d(0, 0, 0, 0deg);}
to {transform: rotate3d(0, 1, 0, 102deg);}}