I was experimenting CSS3 #keyframes animations but I didn't managed to make it work in Chrome (currently I have Chrome 38)
The code is really simple :
HTML
<div id="block">moving text</div>
CSS
#keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
animation: mymove 2s infinite;
}
Here is a Fiddle with the same code.
For me the text isn't moving in Chrome 38, but it works great on Firefox 30 and IE 11.
I have tried to use #-webkit-keyframes but the text doesn't move either in Chrome.
You need to use the vendor prefix on both the style property, and keyframes function
Demo Fiddle
#-webkit-keyframes mymove /* <--- here */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
#block {
position:absolute;
-webkit-animation: mymove 2s infinite;/* <--- and here */
}
Related
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
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,.
I am trying to combine 2 CSS3 Animations that fade in and out. Can anyone help me with this?
This is what I have so far -
jsFiddle
Ok got your question updated my answer accordingly, the best and the least you can do it is like this
Demo
Actual Markup + Styles Required(Don't use it unless and until CSS3 animations are fully supported by all browsers)
HTML
<div class="out"><span>example</span></div>
CSS
div {
animation:demo 7s;
-moz-animation:demo 7s; /* Firefox */
-webkit-animation:demo 7s; /* Safari and Chrome */
-o-animation:demo 7s; /* Opera */
animation:demo 7s infinite;
}
#keyframes demo {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
#-moz-keyframes demo { /* Firefox */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
#-webkit-keyframes demo { /* Safari and Chrome */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
#-o-keyframes demo { /* Opera */
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
I've been trying to do a looping scrolling animation for some comments using webkit, however whenever I apply the animation the effects seem to 'stack' up, and each element of the comment class will be slightly faster than the animation before. Here is my code:
CSS
.comment {
content:'';
-webkit-animation: movecomments 18s linear infinite;
-moz-animation: movecomments 18s linear infinite;
-o-animation: movecomments 18s linear infinite;
}
#-webkit-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
}
#-moz-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
}
#-o-keyframes movecomments {
0% {margin-top: 500px;}
100% {margin-top: 0px;}
HTML (Roughly goes like this, the actual comments are echoed with PHP)
<div class="comment">1</div>
<div class="comment">2</div>
<div class="comment">3</div>
<div class="comment">4</div>
You can check an example of it at my website, at the bottom of the page in the comment section.