I am testing some css animation and cant get this elements :before to rotate, any help?
http://jsfiddle.net/gespinha/hZjkp/5/
CSS
.footerLink{
padding:20px;
background:#000;
color:#fff;
}
.footerLink:before{
content:'ABC';
margin-right:15px;
-webkit-animation: footerHoverOff .5s ease both;
-moz-animation: footerHoverOff .5s ease both;
animation: footerHoverOff .5s ease both;
}
.footerLink:hover:before{
-webkit-animation: footerHoverOn .5s ease both;
-moz-animation: footerHoverOn .5s ease both;
animation: footerHoverOn .5s ease both;
}
#-webkit-keyframes footerHoverOn{ to { -webkit-transform: scale(1.5) rotate(360deg); } }
#-moz-keyframes footerHoverOn{ to { -moz-transform: scale(1.5) rotate(360deg); } }
#keyframes footerHoverOn{ to { transform: scale(1.5) rotate(360deg); } }
#-webkit-keyframes footerHoverOff{ from { -webkit-transform: scale(1.5) rotate(360deg); } }
#-moz-keyframes footerHoverOff{ from { -moz-transform: scale(1.5) rotate(360deg); } }
#keyframes footerHoverOff{ from { transform: scale(1.5) rotate(360deg); } }
Dude, this isn't how you go about css keyframe animation. You are confusing the syntax with transtions.
With keyframe animation:
.footerLink{
padding:20px;
background:#000;
color:#fff;
}
.footerLink:before{
content:'ABC';
margin-right:15px;
}
.footerLink:before:hover {
animation: footerHover .5s;
}
#keyframes footerHover {
from { transform: scale(1.5) rotate(0deg); }
to { transform: scale(1.5) rotate(360deg); }
}
With transitions:
.footerLink{
padding:20px;
background:#000;
color:#fff;
}
.footerLink:before{
content:'ABC';
margin-right:15px;
transform: scale(1.5) rotate(0deg);
transition: .5s;
}
.footerLink:before:hover {
transform: scale(1.5) rotate(360deg);
}
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>
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)}
}
Is it possible to reduce the code to generate a set of mixins that can handle the various browser prefixes?
Trying to reduce the code length to use more mixins
So instead of
#-moz-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
}
}
#-ms-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
}
}
#-o-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
}
}
#-webkit-keyframes orbit {
0% {
opacity: 1;
z-index:99;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
}
}
we have something more like this?
#keyframes orbit {
0% {
opacity: 1;
z-index:99;
-moz-transform: rotate(180deg);
-moz-animation-timing-function: ease-out;
-o-transform: rotate(180deg);
-o-animation-timing-function: ease-out;
-ms-transform: rotate(180deg);
-ms-animation-timing-function: ease-out;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: ease-out;
transform: rotate(180deg);
animation-timing-function: ease-out;
}
}
in SASS you could use this template:
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
it should get you started!
After hide and show of the parent element, the child element no longer rotates(loses it css3 animation).
Removing parent element animation and doing hide/show won't cause the same issue(The issue only occurs when the parent element also have an animation)
I was testing in IE 11.
Is this a known issue?
Here is the snippet in codepen(copied below) http://codepen.io/agirma/pen/byIEd
/*-------- CSS start ---------*/
#-webkit-keyframes show_content {
from {
-webkit-transform: scale(0);
opacity:0;
transform: scale(0);
opacity:0;
}
to {
-webkit-transform: scale(1);
opacity:1;
transform: scale(1);
opacity:1;
}
}
#keyframes show_content {
from {
-webkit-transform: scale(0);
opacity:0;
transform: scale(0);
opacity:0;
}
to {
-webkit-transform: scale(1);
opacity:1;
transform: scale(1);
opacity:1;
}
}
#-webkit-keyframes rotate_content {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate_content {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#parent {
display:block;
background:gray;
width: 100px;
height: 100px;
padding: 20px;
-webkit-animation: show_content 4s;
-ms-animation: show_content 4s;
amimation: show_content 4s;
}
#child {
display:block;
width:80px;
height: 80px;
border:solid 1px red;
-webkit-animation: rotate_content 1s linear infinite;
-ms-animation: rotate_content 1s linear infinite;
amimation: rotate_content 1s linear infinite;
}
/*------------CSS end----------*/
<div id="parent">
<div id="child"></div>
</div>
<button onclick="toggleVisibility()">toggle display</button>
<script>
function toggleVisibility() {
var div = document.getElementById('parent');
div.style.display = div.style.display == 'none' ? 'block' : 'none';
}
</script>
I don't believe this issue is "known". I found it myself a couple of weeks ago when IE-testing a webapp I'm building. I finally got around to looking at it today, and upon noticing the same conditions for occurrence that you've listed, I decided to submit a bug report for IE. I was just about to do that when I found this question.
My bug report:
https://connect.microsoft.com/IE/feedbackdetail/view/941104/ie-11-bug-with-nested-css-animations-upon-display-of-previously-hidden-parent
Update:
The bug was successfully reproduced by Microsoft engineers and will be investigated.
I'm trying to scale, rotate and translate an element using CSS3 animation. This animation works as expected in chrome but i'm unable to reproduce it in Firefox and IE10.
In FF and IE, only the scale transformation works on element when using:
transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
Here a jsFiddle which reproduces this issue: DEMO jsFiddle
This is the HTML part:
<div class="preloader">
<i></i>
</div>
CSS part:
.preloader {
width:240px;
height:30px
}
.preloader i {
position:absolute;
top:0;
background-color:transparent;
width:29px;
height:29px;
border: 1px solid #fff;
-webkit-animation: test 1s infinite linear;
-webkit-transform:scale(0);
-ms-animation: test 1s infinite linear;
-ms-transform:scale(0);
animation: test 1s infinite linear;
transform:scale(0);
border-radius:30px 0px 10px 0px;
}
.preloader i {
left:0;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
animation-delay:0.52s;
}
#-webkit-keyframes test {
0% {
-webkit-transform:scale(1);
background-color:#A300A3;
}
100% {
-webkit-transform:scale(.3) rotate(360deg) translateY(30px) translateX(10px);
background-color:transparent;
border-color:transparent;
border-radius: 15px;
}
}
#-ms-keyframes test {
0% {
-ms-transform:scale(1);
background-color:#A300A3;
}
100% {
-ms-transform:scale(.3) rotate(360deg) translateY(30px) translateX(10px);
background-color:transparent;
border-radius: 15px;
}
}
#keyframes test {
0% {
transform:scale(1);
background-color:#A300A3;
}
100% {
transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
background-color:transparent;
border-radius: 15px;
}
}
IE doesn't need the -ms prefix for the animation property, so remove the #-ms-keyframes and -ms-animation rules.
You have to expand the transform shorthand on both the .preloader i selector and within the #keyframes rule to include the initial values for the properties you're animating: Demo
.preloader i {
-webkit-animation: test 1s infinite linear;
-webkit-transform:scale(0);
animation: test 1s infinite linear;
transform: scale(0) rotate(0deg) translateY(0px) translateX(0px);
}
#keyframes test {
0% {
transform: scale(1) rotate(0deg) translateY(0px) translateX(0px);
background-color:#A300A3;
}
100% {
transform: scale(.3) rotate(360deg) translateY(30px) translateX(10px);
background-color:transparent;
border-radius: 15px;
}
}