I have tried to make an animated arrow like like the one in this site. A demo of my code attempt is available here. But the animation is not working in-line with the animation in the site.
My Code :
.animated-arrow-1 {
-webkit-animation: arrow1 3s infinite ease-out;
animation: arrow1 3s infinite ease-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.animated-arrow-2 {
-webkit-animation: arrow2 3s infinite ease-in;
animation: arrow2 3s infinite ease-in;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
#-webkit-keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#-webkit-keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
Could you please anybody tell me what I missed here?
You were reasonably close to achieving the required animation. In your code, there was only one movement from 0px to 36px for both the arrows but what was actually needed is a two stage animation with different keyframe settings for the two arrows. One arrow should start invisible at 0px, fade-in to 50px, stay there and then fade-out to 100px whereas the other arrow should start visible at 50px, fade-out to 100px, immediately go to 0px and then fade-in at 50px.
.icon {
position: relative;
}
.icon img {
position: absolute;
margin: auto;
display: block;
}
.animated-arrow-1 {
animation: arrow1 3s infinite linear;
opacity: 0
}
.animated-arrow-2 {
animation: arrow2 3s infinite linear;
opacity: 1;
}
#keyframes arrow1 {
0%, 10% {
opacity: 0;
transform: translate(0, 0px);
}
50%,
60% {
opacity: 1;
transform: translate(0, 50px)
}
100% {
opacity: 0;
transform: translate(0, 100px)
}
}
#keyframes arrow2 {
0%, 10% {
opacity: 1;
transform: translate(0, 50px);
}
50%,
60% {
opacity: 0;
transform: translate(0, 100px)
}
61% {
opacity: 0;
transform: translate(0, 0);
}
100% {
opacity: 1;
transform: translate(0, 50px)
}
}
body {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="icon">
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-1" />
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-2" />
</div>
Related
In below code, the animation plays fine for both initialization and for hover, however when I stop hovering the initial animation is re-played. How do I stop this behaviour? Thanks,
Rik
.logoImage2{
width:100%;
-webkit-filter: drop-shadow(12px 8px 4px #222);
filter: drop-shadow(12px 8px 3px #222);
padding-bottom:2rem;
animation: moveInTopRight 5s ease-out;
}
.logoImage2:hover{
animation: spinY 5s ease-in-out;
}
#keyframes moveInTopRight {
0% {
opacity: 0;
transform: translate3d(50rem,-50rem,50rem) rotateZ(0);
}
80% {
opacity: .5;
transform: translate3d(5rem,5rem,5rem) rotateZ(180deg);
}
100% {
opacity: 1;
transform: translate3d(0,0,0) rotateZ(360deg);
}
}
#keyframes spinY {
0% {
transform:rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
You should use them within the same animation to avoid the first one to restart:
.box{
width: 200px;
height:200px;
background:red;
margin:50px;
animation: moveInTopRight 5s ease-out;
}
.box:hover {
animation:moveInTopRight 5s ease-out, spinY 5s ease-in-out;
}
#keyframes moveInTopRight {
0% {
opacity: 0;
transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
}
80% {
opacity: .5;
transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotateZ(360deg);
}
}
#keyframes spinY {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
<div class="box">
</div>
And for this particular case you can replace the second animation with a transition:
.box{
width: 200px;
height:200px;
background:red;
margin:50px;
animation: moveInTopRight 5s ease-out;
transition:0s;
}
.box:hover {
transform: rotateY(360deg);
transition:transform 5s ease-in;
}
#keyframes moveInTopRight {
0% {
opacity: 0;
transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
}
80% {
opacity: .5;
transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) rotateZ(360deg);
}
}
<div class="box">
</div>
All is in the title, I cannot figure out why my animation is working everywhere but not in IE and edge. Where am I missing something ?
Here are the keyframes of my animation and the JS fiddle associated
$(document).ready(function () {
$('#toggle').hide();
});
$('#toggler').click(function () {
$("#toggle").delay(800).velocity("slideDown", {
duration: 1200
});
$("#footer").delay(800).velocity("scroll", {
duration: 1200
});
});
body {
overflow-x:hidden;
overflow-y:scroll;
}
#content1 {
width:100%;
height:800px;
background-color:grey;
position:relative;
}
#toggler {
position: absolute;
left: 0;
right: 0;
bottom:10px;
margin-left: auto;
margin-right: auto;
width: 100px;
height:50px;
}
#footer {
background-color:black;
width:100%;
height:150px;
}
.slide-up {
display: block;
height: auto;
width:100%;
}
.animate {
animation: super-zgeger-mob 5s;
animation-timing-function: linear;
animation-iteration-count: 1;
transform-origin: 50% 50%;
z-index: 9999;
overflow: hidden;
-webkit-animation: super-zgeger-mob linear 5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: super-zgeger-mob linear 5s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: super-zgeger-mob linear 5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: super-zgeger-mob linear 5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
#keyframes super-zgeger-mob {
0% {
transform: translate(-90%, 0%);
opacity: 0;
}
15% {
transform: translate(-90%, 0%);
opacity: 1;
}
50% {
transform: translate(0%, 0%);
}
75% {
transform: translate(-5%, 0%) rotate(10deg);
}
100% {
transform: translate(150%, 0%);
}
}
#-moz-keyframes super-zgeger-mob {
0% {
-moz-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-moz-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-moz-transform: translate(0%, 0%);
}
75% {
-moz-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-moz-transform: translate(150%, 0%);
}
}
#-webkit-keyframes super-zgeger-mob {
0% {
-webkit-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-webkit-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-webkit-transform: translate(0%, 0%);
}
75% {
-webkit-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-webkit-transform: translate(150%, 0%);
}
}
#-o-keyframes super-zgeger-mob {
0% {
-o-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-o-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-o-transform: translate(0%, 0%);
}
75% {
-o-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-o-transform: translate(150%, 0%);
}
}
#-ms-keyframes super-zgeger-mob {
0% {
-ms-transform: translate(-90%, 0%);
opacity: 0;
}
15% {
-ms-transform: translate(-90%, 0%);
opacity: 1;
}
50% {
-ms-transform: translate(0%, 0%);
}
75% {
-ms-transform: translate(-5%, 0%) rotate(10deg);
}
100% {
-ms-transform: translate(150%, 0%);
}
}
<div id=content1>
<button id="toggler">
push me
</button>
</div>
<div id="toggle">
<div id="animation" style="position: relative; left: 0; top: 0;">
<img src="http://image.gilawhost.com/16/11/09/jzjhk7o0.png" class="slide-up"/>
<img id="rolling" src="http://image.gilawhost.com/16/11/09/6d7tsk5k.png" class="slide-up animate" style="position: absolute; top: 0%; left: 0%; z-index: 99;" />
</div>
</div>
<div id=footer>
</div>
I guess, Using positioning on .animate (left:-90% to desired position) over translate() property will work for you.
translate partially supported by IE 11 only and in opera its also wont work properly.
http://caniuse.com/#feat=transforms2d.
Hello I have a button that pulses in css3 (works great) what I want it to do is pulse every 12sec...how can I do this?
.pulse {
animation-name: pulse_animation;
animation-duration: 10000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
I have set the duration to 3sec to let you see exactly how does it work. You can freely adjust the duration by urself. Just change 3s into 12s.
https://jsfiddle.net/bL164jj8/
.pulse {
animation-name: pulse_animation;
animation-duration: 3s;
transform-origin: 70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 100px;
width: 100px;
background-color: lightblue;
}
#keyframes pulse_animation {
0% {
transform: scale(1);
}
8% {
transform: scale(1.01);
}
16% {
transform: scale(1.02);
}
24% {
transform: scale(1.03);
}
32% {
transform: scale(1.04);
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.06);
}
58% {
transform: scale(1.05);
}
66% {
transform: scale(1.04);
}
74% {
transform: scale(1.03);
}
82% {
transform: scale(1.02);
}
90% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
<div class='pulse'>
</div>
I am currently working on sidebar navigation for a mobile site and I am trying to include the below animation for the main menu button.
This works well on different browsers except for mobile devices running iOS - Safari and Android - Android Browser. What am I missing? Thanks.
http://jsfiddle.net/wvck5xnL/
HTML
<div class="mainBtn">
<input id="mainmenuBtn" name="exit" type="checkbox" />
<label for="mainmenuBtn"><span class="burger"></span></label>
</div>
CSS
body {
padding:0;
margin:0;
overflow: hidden;
background:white;
}
/* burger icon animation */
.mainBtn{
display: block;
width: 40px;
padding-left: 10px;
text-align: left;
}
.mainBtn input {
display: none;
}
.mainBtn label {
position: relative;
width: 48px;
height: 57px;
display: block;
cursor: pointer;
background: transparent;
}
/* Exit Icon */
.mainBtn label:before,
.mainBtn input:checked + label:before {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
width: 30px;
height: 4px;
border-radius: 2px;
background: black;
}
.mainBtn label:before {
-webkit-animation: animationOneReverse 1s ease forwards;
-moz-animation: animationOneReverse 1s ease forwards;
-o-animation: animationOneReverse 1s ease forwards;
-ms-animation: animationOneReverse 1s ease forwards;
animation: animationOneReverse 1s ease forwards;
}
#-webkit-keyframes animationOneReverse {
0% { -webkit-transform: rotate(315deg); }
50%, 100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes animationOneReverse {
0% { -moz-transform: rotate(315deg); }
50%, 100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes animationOneReverse {
0% { -o-transform: rotate(315deg); }
50%, 100% { -o-transform: rotate(0deg); }
}
#-ms-keyframes animationOneReverse {
0% { -ms-transform: rotate(315deg); }
50%, 100% { -ms-transform: rotate(0deg); }
}
#keyframes animationOneReverse {
0% { transform: rotate(315deg); }
50%, 100% { transform: rotate(0deg); }
}
.mainBtn input:checked + label:before {
-webkit-animation: animationOne 1s ease forwards;
-moz-animation: animationOne 1s ease forwards;
-o-animation: animationOne 1s ease forwards;
-ms-animation: animationOne 1s ease forwards;
animation: animationOne 1s ease forwards;
}
#-webkit-keyframes animationOne {
0%, 50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(315deg); }
}
#-moz-keyframes animationOne {
0% { -moz-transform: rotate(0deg); }
50%, 100% { -moz-transform: rotate(315deg); }
}
#-o-keyframes animationOne {
0% { -o-transform: rotate(0deg); }
50%, 100% { -o-transform: rotate(315deg); }
}
#-ms-keyframes animationOne {
0% { -ms-transform: rotate(0deg); }
50%, 100% { -ms-transform: rotate(315deg); }
}
#keyframes animationOne {
0%, 50% { transform: rotate(0deg); }
100% { transform: rotate(315deg); }
}
.mainBtn label:after,
.mainBtn input:checked + label:after {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
width: 30px;
height: 4px;
border-radius: 2px;
background: black;
}
.mainBtn label:after {
-webkit-animation: animationTwoReverse 1s ease forwards;
-moz-animation: animationTwoReverse 1s ease forwards;
-o-animation: animationTwoReverse 1s ease forwards;
-ms-animation: animationTwoReverse 1s ease forwards;
animation: animationTwoReverse 1s ease forwards;
}
#-webkit-keyframes animationTwoReverse {
0% { -webkit-transform: rotate(405deg); }
50%, 100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes animationTwoReverse {
0% { -moz-transform: rotate(405deg); }
50%, 100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes animationTwoReverse {
0% { -o-transform: rotate(405deg); }
50%, 100% { -o-transform: rotate(0deg); }
}
#-ms-keyframes animationTwoReverse {
0% { -ms-transform: rotate(405deg); }
50%, 100% { -ms-transform: rotate(0deg); }
}
#keyframes animationTwoReverse {
0% { transform: rotate(405deg); }
50%, 100% { transform: rotate(0deg); }
}
.mainBtn input:checked + label:after {
-webkit-animation: animationTwo 1s ease forwards;
-moz-animation: animationTwo 1s ease forwards;
-o-animation: animationTwo 1s ease forwards;
-ms-animation: animationTwo 1s ease forwards;
animation: animationTwo 1s ease forwards;
}
#-webkit-keyframes animationTwo {
0%, 50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(405deg); }
}
#-moz-keyframes animationTwo {
0% { -moz-transform: rotate(0deg); }
50%, 100% { -moz-transform: rotate(405deg); }
}
#-o-keyframes animationTwo {
0% { -o-transform: rotate(0deg); }
50%, 100% { -o-transform: rotate(405deg); }
}
#-ms-keyframes animationTwo {
0% { -ms-transform: rotate(0deg); }
50%, 100% { -ms-transform: rotate(405deg); }
}
#keyframes animationTwo {
0%, 50% { transform: rotate(0deg); }
100% { transform: rotate(405deg); }
}
/* Burger Icon */
.mainBtn label .burger:before {
content: '';
position: absolute;
top: 17px;
width: 30px;
height: 4px;
border-radius: 2px;
background: black;
-webkit-animation: animationBurgerTopReverse 1s ease forwards;
-moz-animation: animationBurgerTopReverse 1s ease forwards;
-o-animation: animationBurgerTopReverse 1s ease forwards;
-ms-animation: animationBurgerTopReverse 1s ease forwards;
animation: animationBurgerTopReverse 1s ease forwards;
}
#-webkit-keyframes animationBurgerTopReverse {
0%, 50% { -webkit-transform: translateY(12px); opacity: 0; }
51% { -webkit-transform: translateY(12px); opacity: 1; }
100% { -webkit-transform: translateY(0px); opacity: 1; }
}
#-moz-keyframes animationBurgerTopReverse {
0%, 50% { -moz-transform: translateY(12px); opacity: 0; }
51% { -moz-transform: translateY(12px); opacity: 1; }
100% { -moz-transform: translateY(0px); opacity: 1; }
}
#-o-keyframes animationBurgerTopReverse {
0%, 50% { -o-transform: translateY(12px); opacity: 0; }
51% { -o-transform: translateY(12px); opacity: 1; }
100% { -o-transform: translateY(0px); opacity: 1; }
}
#-ms-keyframes animationBurgerTopReverse {
0%, 50% { -ms-transform: translateY(12px); opacity: 0; }
51% { -ms-transform: translateY(12px); opacity: 1; }
100% { -ms-transform: translateY(0px); opacity: 1; }
}
#keyframes animationBurgerTopReverse {
0%, 50% { transform: translateY(12px); opacity: 0; }
51% { transform: translateY(12px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; }
}
.mainBtn input:checked + label .burger:before {
-webkit-animation: animationBurgerTop 1s ease forwards;
-moz-animation: animationBurgerTop 1s ease forwards;
-o-animation: animationBurgerTop 1s ease forwards;
-ms-animation: animationBurgerTop 1s ease forwards;
animation: animationBurgerTop 1s ease forwards;
}
#-webkit-keyframes animationBurgerTop {
0% { -webkit-transform: translateY(0px); opacity: 1; }
50% { -webkit-transform: translateY(12px); opacity: 1; }
51%, 100% { -webkit-transform: translateY(12px); opacity: 0; }
}
#-moz-keyframes animationBurgerTop {
0% { -moz-transform: translateY(0px); opacity: 1; }
50% { -moz-transform: translateY(12px); opacity: 1; }
51%, 100% { -moz-transform: translateY(12px); opacity: 0; }
}
#-o-keyframes animationBurgerTop {
0% { -o-transform: translateY(0px); opacity: 1; }
50% { -o-transform: translateY(12px); opacity: 1; }
51%, 100% { -o-transform: translateY(12px); opacity: 0; }
}
#-ms-keyframes animationBurgerTop {
0% { -ms-transform: translateY(0px); opacity: 1; }
50% { -ms-transform: translateY(12px); opacity: 1; }
51%, 100% { -ms-transform: translateY(12px); opacity: 0; }
}
#keyframes animationBurgerTop {
0% { transform: translateY(0px); opacity: 1; }
50% { transform: translateY(12px); opacity: 1; }
51%, 100% { transform: translateY(12px); opacity: 0; }
}
.mainBtn label .burger:after {
content: '';
position: absolute;
bottom: 16px;
width: 30px;
height: 4px;
border-radius: 2px;
background: black;
-webkit-animation: animationBurgerBottomReverse 1s ease forwards;
-moz-animation: animationBurgerBottomReverse 1s ease forwards;
-o-animation: animationBurgerBottomReverse 1s ease forwards;
-ms-animation: animationBurgerBottomReverse 1s ease forwards;
animation: animationBurgerBottomReverse 1s ease forwards;
}
#-webkit-keyframes animationBurgerBottomReverse {
0%, 50% { -webkit-transform: translateY(-12px); opacity: 0; }
51% { -webkit-transform: translateY(-12px); opacity: 1; }
100% { -webkit-transform: translateY(0px); opacity: 1; }
}
#-moz-keyframes animationBurgerBottomReverse {
0%, 50% { -moz-transform: translateY(-12px); opacity: 0; }
51% { -moz-transform: translateY(-12px); opacity: 1; }
100% { -moz-transform: translateY(0px); opacity: 1; }
}
#-o-keyframes animationBurgerBottomReverse {
0%, 50% { -o-transform: translateY(-12px); opacity: 0; }
51% { -o-transform: translateY(-12px); opacity: 1; }
100% { -o-transform: translateY(0px); opacity: 1; }
}
#-ms-keyframes animationBurgerBottomReverse {
0%, 50% { -ms-transform: translateY(-12px); opacity: 0; }
51% { -ms-transform: translateY(-12px); opacity: 1; }
100% { -ms-transform: translateY(0px); opacity: 1; }
}
#keyframes animationBurgerBottomReverse {
0%, 50% { transform: translateY(-12px); opacity: 0; }
51% { transform: translateY(-12px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; }
}
.mainBtn input:checked + label .burger:after {
-webkit-animation: animationBurgerBottom 1s ease forwards;
-moz-animation: animationBurgerBottom 1s ease forwards;
-o-animation: animationBurgerBottom 1s ease forwards;
-ms-animation: animationBurgerBottom 1s ease forwards;
animation: animationBurgerBottom 1s ease forwards;
}
#-webkit-keyframes animationBurgerBottom {
0% { -webkit-transform: translateY(0px); opacity: 1; }
50% { -webkit-transform: translateY(-12px); opacity: 1; }
51%, 100% { -webkit-transform: translateY(-12px); opacity: 0; }
}
#-moz-keyframes animationBurgerBottom {
0% { -moz-transform: translateY(0px); opacity: 1; }
50% { -moz-transform: translateY(-12px); opacity: 1; }
51%, 100% { -moz-transform: translateY(-12px); opacity: 0; }
}
#-o-keyframes animationBurgerBottom {
0% { -o-transform: translateY(0px); opacity: 1; }
50% { -o-transform: translateY(-12px); opacity: 1; }
51%, 100% { -o-transform: translateY(-12px); opacity: 0; }
}
#-ms-keyframes animationBurgerBottom {
0% { -ms-transform: translateY(0px); opacity: 1; }
50% { -ms-transform: translateY(-12px); opacity: 1; }
51%, 100% { -ms-transform: translateY(-12px); opacity: 0; }
}
#keyframes animationBurgerBottom {
0% { transform: translateY(0px); opacity: 1; }
50% { transform: translateY(-12px); opacity: 1; }
51%, 100% { transform: translateY(-12px); opacity: 0; }
}
Hi I tried your fiddle and it worked on my mobile, which is iphone5s.
But anyway, as far as I've known, when you want to use keyframes-translate for an element. The element has to be displayed block, or it has to be wrapped by a div, which default is displayed block too.
a {
background:orange;
}
div {
-webkit-animation: move 5s infinite;
}
#-webkit-keyframes move {
0% { -webkit-transform: translate(20px); }
100% { -webkit-transform: translate(500px); }
}
<div class="wrapper">Test</div>
I'm thinking maybe translate doesn't support some elements completely. For instance, when you want to translate a tag element, you have to set the element display: block.
However, when you want to apply translate on a div element, if you set the css on the div element display:inline-block, the translate will still work on that div.
So maybe try to set the elements that you'd like to move display:block.
I've been playing around with this CSS3 Animation, but I can't get it to pivot from a different location than the middle.
It is an animation that causes a flip-like effect from the middle where the top-half goes into the negative z-axis and the bottom-half goes into the positive z-axis.
I am trying to get the pivot-point to be the top so as the element that this animation is applied to is transformed, the entire element goes into the positive z-axis.
And then the flipOut animation would just be the reverse of that.
I'd appreciate any help in getting this animation to behave as I described.
Here is the code that runs the animation right now:
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.6s;
-moz-animation-duration: 0.6s;
-ms-animation-duration: 0.6s;
-o-animation-duration: 0.6s;
animation-duration: 0.6s;
}
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-moz-keyframes flipInX {
0% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-moz-transform: perspective(400px) rotateX(-10deg);
}
70% {
-moz-transform: perspective(400px) rotateX(10deg);
}
100% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#-o-keyframes flipInX {
0% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-o-transform: perspective(400px) rotateX(-10deg);
}
70% {
-o-transform: perspective(400px) rotateX(10deg);
}
100% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-10deg);
}
70% {
transform: perspective(400px) rotateX(10deg);
}
100% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
-moz-animation-name: flipInX;
-o-backface-visibility: visible !important;
-o-animation-name: flipInX;
backface-visibility: visible !important;
animation-name: flipInX;
}
#-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#-moz-keyframes flipOutX {
0% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#-o-keyframes flipOutX {
0% {
-o-transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-o-transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
#keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
-moz-backface-visibility: visible !important;
-o-animation-name: flipOutX;
-o-backface-visibility: visible !important;
animation-name: flipOutX;
backface-visibility: visible !important;
}
Set the transform origin:
transform-origin : center top;
Per MDN docs:
transform-origin: x-offset /* One-value syntax */ E.g. transform-origin: 2px
transform-origin: offset-keyword E.g. transform-origin: bottom
transform-origin: x-offset y-offset /* Two-value syntax */ E.g. transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword E.g. transform-origin: 2px left
transform-origin: x-offset-keyword y-offset E.g. transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword E.g. transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword E.g. transform-origin: top right
transform-origin: x-offset y-offset z-offset /* Three-value syntax */ E.g. transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset E.g. transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset E.g. transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset E.g. transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset E.g. transform-origin: bottom right 2cm