Please help me understand why the following CSS animation does not produce a color switch back and forth between red and blue.
div {animation: colorswitch 1s step-end infinite}
#keyframes colorswitch {0% {color:red} 100% {color:blue}}
<div>text</div>
As a timing function I specify step-end which is supposed to directly jump to the final state. But it does not work.
Here is a solution of color switch animation.
div {
animation: colorswitch 1s step-end infinite;
}
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
}
demo
Still trying to understand why it's behave like this.
Why 50% works?
It also work for-
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:blue}
}
Add for
#keyframes colorswitch {
0% {color:red}
50% {color:blue}
100% {color:red}
}
Ah...I think I see the issue. I think this is what you were after.
div {
font-size: 72px;
animation: colorswitch 1s step-end infinite;
}
#keyframes colorswitch {
0% {
color: red;
}
50% {
color: blue;
}
}
<div>
text</div>
Related
I am new to programming. Please forgive me if this is a very basic question.
I am working on a small project of designing a very simple personal website using HTML and CSS. On the website, I want the background colors of the main website to fade into one another after some time (say, to transition from light blue to light green to light yellow after 15s each). Is there a way I can do this using CSS?
body {
background:lightblue;
animation:changebg infinite 15s;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
Do this instead
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg{
0% {background:lightblue;}
33% {background:lightgreen;}
66% {background:lightyellow;}
100% {background:lightblue;}
}
If this doesn't work, you can mess around with the timing.
You can try the following code:
body{
background: lightblue;
animation: changebg 60s linear infinite alternate;
}
#keyframes changebg {
0% { background:lightblue; }
33% { background:lightgreen; }
66% { background:lightyellow; }
100% { background:lightblue; }
}
Pretty much the website's background will start at light blue, and when it reaches 33% of 60s (for e.g.) it will change to light green, etc.
And when it reaches 100% at 60s time, the "linear infinite alternate" will make sure it repeats.
body {
background: red;
animation: changebg 5s infinite;
//adding infinte will make your animation run in a loop
}
#keyframes changebg
/* Firefox */
{
0% {
background: red;
}
50% {
background: blue;
}
100% {
background: red;
}
}
Just an addition to the previous answer
Keep on learning.
This might just be a matter of it not being possible but here is my CodePen link https://codepen.io/Spectral/pen/QgMdbM?editors=1100
I can't make the gradient animate, am I doing something wrong or is this just not possible?
code:
<h1 class='knockout'>This text should be animated!</h1>
body{background:#fdf}
.knockout{
margin:50px 0 0 0 auto;
font-family:sans-serif;
color:blue;
/* gradient*/
background: linear-gradient(4deg, #4a6bbd, #b65181, #3c636c);
/* animation */
-webkit-animation: gradientAnimation 4s ease infinite;
-moz-animation: gradientAnimation 4s ease infinite;
-o-animation: gradientAnimation 4s ease infinite;
animation: gradientAnimation 4s ease infinite;
#-webkit-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-moz-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#-o-keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
#keyframes gradientAnimation {
0%{background-position:2% 0%}
50%{background-position:99% 100%}
100%{background-position:2% 0%}
}
/* knockout*/
background-size:cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
font-size:20vw;
text-align:center;
/* stroke*/
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #010;
}
The #keyframes {} block of code must be written outside the .knockout {} block of code, rather than within it. Here is an example of the background gradient working:
https://codepen.io/anon/pen/PjJoym?editors=1100
(I removed the #-webkit, #-moz, #-o code to simplify this demonstration)
I don't know if this is exactly what you were looking for, and its a little complicated, but I just added your code to an existing sample of mine. Maybe you could do something with it, I kinda gave up on it.
https://codepen.io/MikeIke/pen/xrgvEW
<div class="header">
<h1>Animated Fixed Knockout Text Example(Work In Progress)</h1>
<h3>Scroll down to see</h3>
</div>
<div id="profile">
<div class="section">
<div id="knock1">
<div id="knock2">
<div class="sectionTitle" id="profileTitle">TEXT</div>
</div>
</div>
</div>
</div>
i have somewhat achieved infinite scrolling background using background position property.But the problem is i've given the value background-position:0 200px
in the keyframes,after moving downwards to 200px the background image restarts its movement from the beginning.I don't want that to happen,it should scroll infinitely without any hiccups. how to do it?
here is the code.
html:
<div id="cloud-scroll"></div>
css:
#cloud-scroll {
width: 275px;
height: 183px;
background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png);
background-size:cover;
-webkit-animation: backgroundScroll 20s linear infinite;
animation: backgroundScroll 20s linear infinite;
}
#-webkit-keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 200px;}
}
You should use background-repeat and set your background image such that when it's repeated vertically ( or horizontally, if that's what you are doing ), it is seamless.
Your div is 183px tall, so you should use 183px in your animation.
#keyframes backgroundScroll {
from {background-position:0;}
to {background-position:0 183px;}
}
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 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,.