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>
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 have this HTML:
<div id="images_container" style="z-index: 900;">
<div id="images">
<img src="images/cust.png">
<img src="images/cust.png">
<img src="images/cust.png">
</div>
</div>
I want to make the images move from the right of the screen to the left using the animation CSS3.
I got it working:
scrolls the first image.
starts showing the second image (by the way, the image is the same image 3 times).
the first image almost finishes scrolling.
the whole div sort of "jumps" and loads the first image from the beginning.
It doesn't look aesthetic at all.
This is the CSS I have so far:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#-moz-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#-ms-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
#first #images_container {
position: absolute;
height: 60px;
width: 100%;
overflow: hidden;
margin: -67px auto 0;
z-index: 900;
}
#first #images {
-webkit-animation: ticker 45s linear infinite;
-moz-animation: ticker 45s linear infinite;
-ms-animation: ticker 45s linear infinite;
animation: ticker 45s linear infinite;
width: 10000px;
}
More relevant info about the images: they are 3294px width each.
Update:
When I change this:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -1956px;}
}
to this:
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000;}
}
All the images run well, but the speed of the marquee increases.
Any solution for that?
Update Final Answer:
I changed the seconds from 45 to 160:
#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}
Solved my problem :)
Because the width of the images is high, I gave it a big numger for the 'margin-left' on the keyframes.
#-webkit-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#-moz-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#-ms-keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
#keyframes ticker {
0% {margin-left: 0;}
100% {margin-left: -10000px;}
}
Because the image is really long, 45s wont be slow enough (for me), so I gave it a high number. like 160s.
#first #images {
-webkit-animation: ticker 160s linear infinite;
-moz-animation: ticker 160s linear infinite;
-ms-animation: ticker 160s linear infinite;
animation: ticker 160s linear infinite;
width: 10000px;
}
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 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.