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!
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)}
}
This rotate animation does not work in mozila firefox but in google chrome, it is working properly. Actually this problem only occurs in absolute and relative blocks.In general cases this animation work properly in any browser. Please help..
My css codes are given below.
css code :
.gear1{
display:block;
width:64px;
height:64px;
position:absolute;
left:0;
bottom:0;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration: 3s;
-o-animation-name: rotate;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration: 3s;
-ms-animation-name: rotate;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-ms-animation-duration: 3s;
animation-name:rotate;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-duration:3s;}
Css Animation :
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-moz-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-o-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
#-ms-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}}
This is because you are using the wrong vendor prefixes in your keyframe declaration. You need to use the same vendor (for transform) prefix of your #key-{vendor}-keyframes.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Ok so I am pretty new to css3 animations and I am trying to get to grips with it. So what I am trying to do is animate two images one to slide from the bottom and the other to slide in from the right and then repeat this. I have the images sliding in ok but what I cant get to work is repeating the 1st animation after the last has ended.
Below is the css that I have at the min:
.image-1{
-webkit-animation-iteration-count : infinite;
float:right;
animation-name: slideUp, hide;
-webkit-animation-name: slideUp, hide;
-moz-animation-name: slideUp, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
opacity: 0;
}
.image-2{
float:right;
animation-name: slideLeft, hide;
-webkit-animation-name: slideLeft, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay:6s, 6s;
-moz-animation-delay:6s, 6s;
-webkit-animation-delay:6s, 6s;
-o-animation-delay:6s, 6s;
opacity: 0;
}
#keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-moz-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-webkit-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-o-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
/*
==============================================
slideUp
==============================================
*/
#keyframes slideUp {
0% {
transform: translateY(100%);
opacity: 0.0;
}
50%{
transform: translateY(-2%);
opacity: 1;
}
65%{
transform: translateY(4%);
opacity: 1;
}
80%{
transform: translateY(-1%);
opacity: 1;
}
95%{
transform: translateY(2%);
opacity: 1;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
opacity: 0.0;
}
50%{
-webkit-transform: translateY(-3%);
opacity: 1;
}
65%{
-webkit-transform: translateY(5%);
opacity: 1;
}
80%{
-webkit-transform: translateY(-1%);
opacity: 1;
}
95%{
-webkit-transform: translateY(2%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
/*
==============================================
slideLeft
==============================================
*/
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
You can start a repeating animation with a delay (this delay should be the time your first animation takes) by using
animation-delay:2s;
and you repeat by using
animation-iteration-count:infinite;
You can find a nice example with all css3 animation properties here:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4
I would like to rotate an image 180 degrees when it is clicked. Then rotate that same image a further 180 degrees (completing the revolution) on subsequent click.
I have achieved the first part using:
.img_rotator_180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_360 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
.img_rotator_transition {
-webkit-transition: all 1s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 1s ease-out; /* Firefox 4-15 */
-o-transition: all 1s ease-out; /* Opera 10.50–12.00 */
transition: all 1s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+
}
And
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
Alternative version:
$('div.' + this.id + ' img').addClass('img_rotator_180 img_rotator_transition');
What happens with this is that the images initial rotation is not remembered meaning that the second rotation effectively redoes the 180 degree rotation.
Is there a way to establish the images current rotation before applying further transformation? Or perhaps a way to append rotation rather than replace it?
Thank you
Demo Fiddle
HTML
<div>Click Me!</div>
jQuery
$('div').on('click', function () {
if ($(this).hasClass('spinIn')) {
$(this).addClass('spinOut').removeClass('spinIn');
} else {
$(this).addClass('spinIn').removeClass('spinOut');
}
});
CSS
div {
display:inline-block;
}
.spinIn {
-webkit-animation: spinIn 0.6s 1 linear;
animation: spinIn 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinIn {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#keyframes spinIn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.spinOut {
-webkit-animation: spinOut 0.6s 1 linear;
animation: spinOut 0.6s 1 linear;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
#-webkit-keyframes spinOut {
0% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinOut {
0% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
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);
}