I am trying to do transform a image using css keyframe
I have something like
#-webkit-keyframes blinkscale {
0% {
transform: scale(1,1)
}
50% {
transform: scale(0.1,0.1)
}
100% {
transform: scale(3,3)
}
}
.addScale {
-webkit-animation: blinkscale 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blinkscale 2s;
-moz-animation-iteration-count: infinite;
-o-animation: blinkscale 2s;
-o-animation-iteration-count: infinite;
}
html
<img src='test.jpg' class='addScale' />
It works if I change my keyframe to
#-webkit-keyframes blinkscale {
0% {background: yellow;}
50% {background: green;}
100% {background: blue;}
}
but not the scale one. Can anyone help me about it? Thanks a lot!
This should do it for you. Just have to make sure the vendor prefixes persist.
CSS:
#-webkit-keyframes blinkscale {
0% {
-webkit-transform: scale(1,1)
}
50% {
-webkit-transform: scale(0.1,0.1)
}
100% {
-webkit-transform: scale(3,3)
}
}
Also to note, you have -moz- and -o- animation set to .addScale so be sure to set keyframes to accommodate all those vendor prefixes and don't forget the standard animation as well.
This link here should be of use Keyframe Animations
Maybe you haven't included the proper browser help, in the webkit keyframes blinkscale, I only see the help for mozilla,.
Related
Try using this JSFiddle in Chrome and in Firefox.
Here's the code:
(HTML)
<div class="slide-down">
<h1>Hello!</h1>
</div>
(CSS)
.slide-down {
font-size: 3em;
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-moz-animation-name: slideDown;
-webkit-animation-name: slideDown;
}
#-moz-keyframes slideDown {
0% {
-moz-transform:translateY(-300px);
}
100% {
-moz-transform:translateY(0px);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-300px);
}
100% {
-webkit-transform: translateY(0px);
}
}
My issue is that it works in Chrome but only works in Firefox when the starting coordinates (at the "0%" point of the animation) of the animated div are within the viewport. Otherwise, it can completely skip the animation. Try changing the translateY() parameter to something more conservative, like -50px, and it will work.
Is there a workaround for this? It would be nice to be able to bring something in from outside the screen without having to write a script to figure out what its initial y-coordinate should be.
I would consider animating the margin instead:
.slide-down {
font-size: 3em;
animation:slideDown 3s forwards;
}
#keyframes slideDown {
0% {
margin-top:-300px;
}
100% {
margin-top:0;
}
}
<div class="slide-down">
<h1>Hello!</h1>
</div>
I'm working with HTML5 banner having a lot of CSS3 animation. To make reusable keyframe animation I'm using multiple animation on single element. It's working perfectly except safari.
CSS:
.text1 {
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
}
.text2 {
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
}
/* fadeInLeft */
#-webkit-keyframes fadeInLeft {
0% { -webkit-transform: translateX(-100px); opacity: 0; }
100% { -webkit-transform: translateX(0px); opacity: 1; }
}
#keyframes fadeInLeft {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
/* fadeOutRight */
#-webkit-keyframes fadeOutRight {
0% { -webkit-transform: translateX(0px); opacity: 1; }
100% { -webkit-transform: translateX(100px); opacity: 0; }
}
#keyframes fadeOutRight {
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
jsfiddle link
Workable solutions:
Wrap the element with another/more element & add single animation to each element. This solution needs extra styling for wrapper element.
Merge multiple animation into one & this solution increase the complexity of the keyframes rule and it's not easily maintainable for complex animation.
According to accepted answer of another stackOverflow post –
You cannot animate same attribute more than once, on a same element, the last one will overwrite other.
It’s only true for safari in my case & first animation is only running not
second one. If I don’t animate same property on multiple animation
then it’s also fine for safari(jsfiddle). This one is not
suitable for me because I will need to animate same property in
multiple animations.
Note:
Although I'm using multiple animation on same element but I'm not animating at same time, there is delay between each animation.
Question:
Is it possible to use multiple CSS3 animation on same element regardless of animating property?
For some reason, Safari does not read trough the shorthand method for describing the animation, for example:
animation: test 1s 2s 3 alternate backwards
It needs to be described more detailed with its separate properties listed:
.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
I have a div which needs to start as a square, 70px x 70px and scale to a larger rectangle 140px x 210px
For some reason the div won't scale to larger than it's original size. How can i achieve this?
This is my code:
HTML:
<div id="tab">
</div>
CSS:
#tab {
-webkit-animation: enlarge 5s forwards;
width: 140px;
height: 210px;
position: absolute;
left: 15px;
top: 0px;
background-color: red;
}
#-webkit-keyframes enlarge{
0% {-webkit-transform: scale(1,1)};
100% {-webkit-transform: scale(2,4)};
}
http://jsfiddle.net/kacmuhuw/1/
EDIT:::::
CORRECT FIDDLE:
http://jsfiddle.net/kacmuhuw/6/
Your code works on Chrome/Webkit, not in other browser (e.g. Firefox).
You have to add prefixes to support all browsers. Also, the right proportion is width*2 and height*3:
#tab {
-moz-animation: enlarge 5s forwards;
-ms-animation: enlarge 5s forwards;
-o-animation: enlarge 5s forwards;
animation: enlarge 5s forwards;
...
}
...
#-webkit-keyframes enlarge{
100% {-webkit-transform: scale(2,3)}
}
#-ms-keyframes enlarge{
100% {-ms-transform: scale(2,3)}
}
#-o-keyframes enlarge{
100% {-o-transform: scale(2,3)}
}
#-moz-keyframes enlarge{
100% {-moz-transform: scale(2,3)}
}
#keyframes enlarge{
100% {transform: scale(2,3)}
}
http://jsfiddle.net/kacmuhuw/10/
(in the fiddle it doesn't shows well 'cause the box is absolutely positioned and it's cropped: change top and left values to see it correctly)
Your Keyframe syntax is not correct. It should look like this
#-webkit-keyframes enlarge{
0% { -webkit-transform: scale(0,0) }
100% {-webkit-transform: scale(3,4) }
}
Demo: http://jsfiddle.net/kacmuhuw/8/
without the semicolon at the end of the }
With your updated jsFiddle it is even more simple:
#-webkit-keyframes enlarge{
100% {-webkit-transform: scale(2,4)}
}
New demo: http://jsfiddle.net/kacmuhuw/9/
I am trying to get a rotation effect with:
#outer {
position:relative;
width:50%;
left:0.3%;
top:0.2%;
-webkit-animation: rotation 30s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
But it wobbles. I'm not sure if it's a CSS issue of just the outer ring isn't a "perfect" circle. Why does it do this?
Outer circle:
You can see a demo here.
The reason it appears to bob up and down is because your image is lopsided. You can test it with this.
<div></div>
<img src="http://i.imgur.com/LbXvgbp.png" width="400" />
<style>
* { position: absolute }
div {
width: 400px;
height: 400px;
border-radius: 50%;
background: #000;
}
</style>
It appears to be elliptical - more wide than tall.
You have -webkit- prefixes for animation and keyframes but for other browsers you need the non-prefixed properties, too (-moz- and -ms- aren't needed for these):
#outer {
-webkit-animation: rotation 30s infinite linear;
animation: rotation 30s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
#keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
works for me... what browser are you using? If it's not webkit you won't see anything without providing the proper vendor prefixes. This is how i usually write transforms
-webkit-transform:;
-moz-transform:;
-ms-transform:;
transform:;
The #keyframes rule is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the #-webkit-keyframes rule.
Note: The #keyframes rule is not supported in Internet Explorer 9 and earlier versions.
You should provide rules with and without the -webkit- to support all the current browsers.
#keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
W3Schools
css #-moz-keyframes animation on firefox 18.0.1 is not working,
I have checked this animation on previous version( forgot version previous number) , it was working,
Here is the animation
<html>
<head>
<style type="text/css">
#-webkit-keyframes animation {
0% { -webkit-transform:translate(100px,100px) scale(1); }
50% { -webkit-transform:translate(00px,00px) scale(2); }
100% { -webkit-transform:translate(100px,100px) scale(1); }
}
#-moz-keyframes animation_m {
0% { -moz-transform:translate(100px,100px) scale(1); }
50% { -moz-transform: translate(00px,00px) scale(2); }
100% { -moz-transform:translate(100px,100px) scale(1); }
}
.cc1{
-webkit-animation-name: "animation";
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-name: "animation_m";
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
}
#id1,#ci1{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementById("ci1");
var ctx=e.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(0,0,90,90);
}
</script>
<body>
<div id="id1" class="cc1">
<canvas width="100" height="100" id="ci1" ></canvas>
</div>
</body>
</html>
Is it a Firefox bug?
Firefox 18 (and Opera, and IE10, and many others in the near future) expects the W3C property without the vendor prefix. Make sure to add the following block:
#keyframes animation_m {
0% { transform:translate(100px,100px) scale(1); }
50% { transform: translate(00px,00px) scale(2); }
100% { transform:translate(100px,100px) scale(1); }
}
.cc1 {
animation-name: animation_m;
animation-duration: 2s;
timing-function: linear;
}
Note that the -moz-transform properties were also changed to transform.
You should always include the vendor-prefix-free version for all prefixed CSS properties. I would also recommend giving your CSS styles and animation names more descriptive names.
The problem is in this line
-moz-animation-name: "animation_m";
in google chrome if you write your animation name in double quote ("") it takes as identifier but in firefox it is consider as a string , not the identifier so mention animation name without double quote...
-moz-animation-name: animation_m;