I'm trying to animate a div on mouseout with keyframes animation :
div{
-webkit-transition: -webkit-animation:flipInY 2s;
}
div:hover{
-webkit-animation: flipInY 0.8s;
}
So when the user mouseout there will be some transition,but i want to do this using animation keyframes not with normal transition:
#-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
Related
Not really aware how to use CSS animations, but I found something that works perfectly for my site. The one issue, is it's way too small. Anyone have any advice for what I would need to tinker with to expand the size? I actually see where to increase the size/scale towards the end of the animation, which is made obvious with the scale attributes. What I don't know, is controlling the size before the animation causes it to expand. Thank you very much. -Wilson
Ex:
http://www.wilsonschlamme.com/animationtest.html
css:
.overlay-loader .loader-icon {
position: absolute;
top: 50%;
left: 44%;
color: #42f498;
}
.overlay-loader .loader-icon.spinning-cog {
-webkit-animation: spinning-cog 1.3s infinite ease;
-moz-animation: spinning-cog 1.3s infinite ease;
-ms-animation: spinning-cog 1.3s infinite ease;
-o-animation: spinning-cog 1.3s infinite ease;
animation: spinning-cog 1.3s infinite ease;
background-color: #42f498;
}
#-webkit-keyframes spinning-cog {
0% { -webkit-transform: rotate(0deg) }
20% { -webkit-transform: rotate(-45deg) }
100% { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes spinning-cog {
0% { -moz-transform: rotate(0deg) }
20% { -moz-transform: rotate(-45deg) }
100% { -moz-transform: rotate(360deg) }
}
#-o-keyframes spinning-cog {
0% { -o-transform: rotate(0deg) }
20% { -o-transform: rotate(-45deg) }
100% { -o-transform: rotate(360deg) }
}
#keyframes spinning-cog {
0% { transform: rotate(0deg) }
20% { transform: rotate(-45deg) }
100% { transform: rotate(360deg) }
}
#-webkit-keyframes shrinking-cog {
0% { -webkit-transform: scale(2) }
20% { -webkit-transform: scale(2.2) }
100% { -webkit-transform: scale(1) }
}
#-moz-keyframes shrinking-cog {
0% { -moz-transform: scale(2) }
20% { -moz-transform: scale(2.2) }
100% { -moz-transform: scale(1) }
}
#-o-keyframes shrinking-cog {
0% { -o-transform: scale(2) }
20% { -o-transform: scale(2.2) }
100% { -o-transform: scale(1) }
}
#keyframes shrinking-cog {
0% { transform: scale(2) }
20% { transform: scale(2.2) }
100% { transform: scale(0) }
}
.overlay-loader .loader-icon.shrinking-cog {
-webkit-animation: shrinking-cog .3s 1 ease forwards;
-moz-animation: shrinking-cog .3s 1 ease forwards;
-ms-animation: shrinking-cog .3s 1 ease forwards;
-o-animation: shrinking-cog .3s 1 ease forwards;
animation: shrinking-cog .3s 1 ease forwards;
background-color: #42f498;
}
If you want it to be big from the start of the animation, add scale to spinning-cog animation. do this to all prefixes (change x to what scale you want)
#keyframes spinning-cog {
0% { transform: rotate(0deg) scale(x)}
20% { transform: rotate(-45deg) scale(x)}
100% { transform: rotate(360deg) scale(x)}
}
I am trying to auto rotate an image after ever 5 seconds from css. My code is working but only on hover but I want on both hover and without hover. So far I have done is given below.
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
<div class="circle-border">
<img class="img-circle" src="images/web.jpg" alt="service 1">
</div>
Thanks in advance
You need an animation not a transtion.
CSS Animations # MDN
This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.
div {
width: 100px;
height: 100px;
background: #663399;
margin: 1em auto;
-webkit-animation-name: spinner;
animation-name: spinner;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spinner {
83.33% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div></div>
I used Javascrit to do it however it's still can made with css alone
but maybe usefull, hope it can help
var circle = document.getElementById("test");
if (circle.classList.contains("move")) {
setInterval(function () {
"use strict";
circle.classList.add("move");
}, 2000);
setInterval(function () {
"use strict";
circle.classList.remove("move");
}, 5000);
}
.circle-border {
width:100px;
height:100px;
background-color:#F00;
}
.move {
animation: circle .9s ease 1;
}
.circle-border:hover {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: transform 0.9s ease 0.3s;
}
#keyframes circle {
0% {transform:rotate(0)}
100% { transform:rotate(720deg)}
}
<div id="test" class="circle-border move">
</div>
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>
Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation?
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Below is the script for flip animation using keyframes
#keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip-animation {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
animation-iteration-count: infinite;
transition-timing-function: linear;
animation-duration: 4.5s;
}
Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/
There you go FIDDLE
Now you can play around with rotations on different axis.
for example,-webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.
.center {
width:300px;
margin:auto;
margin-top:100px;
-webkit-perspective:250px;
perspective:250px;
}
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}
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