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;}
}
Related
My CSS goes like this (with the help of this pen):
div[class="heading"] {
animation: colorchange 50s; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}
#keyframes colorchange
{
0% {background: #e55f5f;}
25% {background: yellow;}
50% {background: #55CE91;}
75% {background: #5fe5e5;}
100% {background: #ce71ae;}
}
#-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: #e55f5f;}
25% {background: yellow;}
50% {background: #55CE91;}
75% {background: #5fe5e5;}
100% {background: #ce71ae;}
}
<div class="heading">
<i class="fa fa-user"></i> Some Sample Text Here...
</div>
Everything goes perfectly well except that I want my DIV's gradually changing colors to be in cycle. It stops, ofcourse, after having to show all colors from the CSS. How can I make it uninterruptible? Thanks for all response
You can add infinite to the animation in your css:
div[class="heading"] {
animation: colorchange 3s infinite ; /* animation-name followed by duration in seconds*/
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 3s infinite ; /* Chrome and Safari */
}
#keyframes colorchange
{
0% {background: #e55f5f;}
25% {background: yellow;}
50% {background: #55CE91;}
75% {background: #5fe5e5;}
100% {background: #ce71ae;}
}
#-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
0% {background: #e55f5f;}
25% {background: yellow;}
50% {background: #55CE91;}
75% {background: #5fe5e5;}
100% {background: #ce71ae;}
}
<div class="heading">
<i class="fa fa-user"></i> Some Sample Text Here...
</div>
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 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 */
}
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,.