I'm working on a css animation to switch the background color of an element.
This animation is only two phases and no smooth transitions between both phases.
It means, the first 50% of the animation, the background color will be blue, and the last 50% of the animation, the background color will be grey, without an transition in between.
Here's the animation fully working:
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: blue;
}
50.00001% {
background: grey;
}
100% {
background: grey;
}
}
<div></div>
I'm wondering if there's a simpler way to do that. What I'm looking for is to use only from and to inside the keyframes without any additional step.
You can achieve it using the animation-timing-function: steps(1) as given in below snippet. You can find more details about the animation-timing-function here and the generic steps value here in MDN.
div {
width: 200px;
height: 200px;
animation: bg 4s steps(1) infinite;
}
#keyframes bg {
0% {
background: blue;
}
50% {
background: grey;
}
}
<div></div>
Note: I have set the keyframe for grey color at 50% instead of 100% due to the problem discussed in this answer.
You can also use a short-cut notation :
div {
width: 200px;
height: 200px;
animation: bg 4s linear infinite;
}
#keyframes bg {
from, 50% {
background: blue;
}
50.00001%, to {
background: grey;
}
}
<div></div>
Related
I have created a rotating linear-gradient background. Unfortunately, as it rotates, in the corners you can see white screen. I am trying to get it so the color fills the viewport with nothing visible but the rotating gradient.
Here is my code so far (done on codepen.io):
HTML
<div class="fade"></div>
CSS
body {
margin: 0;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
height: 100vh;
width: 100%;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
from {
transform: scale3d(1,1,1) rotateZ(0deg);
}
to {
transform: scale3d(1,1,1) rotateZ(360deg);
}
}
I originally had the scale3d as (2,2,1). Changing it to (1,1,1) didn't solve anything. I have also tried changing the height and width to greater than 100wv and setting a background-position of center center, but neither of those worked.
Here is the codepen.
Use the vmax unit like below to create a big overflowing square:
body {
margin: 0;
overflow:hidden;
}
.fade {
background-image: linear-gradient(0deg, red, blue, red);
position:absolute;
height: 200vmax;
width: 200vmax;
left:50%;
top:50%;
transform:translate(-50%,-50%);
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform:translate(-50%,-50%) rotate(360deg);
}
}
<div class="fade"></div>
You can simplify with a pseudo element:
html::before {
content:"";
background-image: linear-gradient(0deg, red, blue, red);
position:fixed;
top:-50vmax;
bottom:-50vmax;
left:-50vmax;
right:-50vmax;
animation: revolve 1s infinite linear;
}
#keyframes revolve {
to {
transform: rotate(360deg);
}
}
I'm trying to use CSS variables as the background-color values. I got it to work in Chrome but not in Edge browser. I'm not sure if I did something wrong or it is a bug with the Edge browser.
In this example, the square change background-color from blue to red. But in Edge it's remains white.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
Here is temporary work around if anyone needs it: If I use the CSS variable as the static background color, the animation will start to work. This feels totally random but it seems to solve the problem.
:root {
--blue-color: blue;
--red-color: red;
}
#keyframes animatedBackground {
0% { background-color: var(--blue-color); }
100% { background-color: var(--red-color); }
}
#animate-area {
width: 100px;
height:100px;
background-color: var(--blue-color); /* this fixed it! */
animation: animatedBackground 1s linear infinite;
}
<div id="animate-area"></div>
I was discussing with someone the ability for CSS3 to do animations upon click and hover and I decided to make a little test to show them. I decided to do a bit of boundary pushing and made it so that when you hovered over the animation happened, and when you un-hovered it waited 3 seconds and then ran the animation to put it back.
The problem however is that when the page loads, it runs the "un-hover" animation.
Any ideas for getting around this or another method that's better?
What the below code does is when you hover over the red box it animates is blue. When you un-hover is animates it back red again after 3 seconds. Both of them calculate to a 1 second animation time.
I know this could be fixed with one very simple line of JavaScript, but I'm only interested in seeing if there's a CSS answer.
#-webkit-keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#keyframes makeblue {
0% {
background: red;
}
100% {
background: blue;
}
}
#-webkit-keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
#keyframes makered {
0% {
background: blue;
}
75% {
background: blue;
}
100% {
background: red;
}
}
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: makered 4s;
animation: makered 4s;
}
div:hover {
-webkit-animation: makeblue 1s;
animation: makeblue 1s;
background: blue;
}
<div></div>
EDIT 1
Does anyone know if this type of functionality exists, or even potentially planned for the future?:
#keyframes makeblue {
0% {
background: [CurrentValue];
}
100% {
background: blue;
}
}
Having this would be able to fix the problem. If this doesn't exist, I think it should :).
If you are dealing with background or simple css only (not a keyframe animation), you can have it with transition delay, check it out at jsfiddle!:
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition:background-color 0.25s 3s linear;
}
div:hover {
background-color:blue;
transition:background-color 0.25s linear;
}
I would like to define a CSS3 animation which, at some points during the animation, uses the natural value for a property as if the animation was not applied.
e.g.
#keyframes fadeblue
{
0%
{
background-color: natural;
}
100%
{
background-color: blue;
}
}
.thing1
{
background-color: red;
animation: fadeblue 2s;
}
.thing2
{
background-color: green;
animation: fadeblue 2s;
}
thing1 would fade from red to blue while thing2 would fade from green to blue.
What value should I use in the place of natural in the 0% keyframe?
I have tried both inherit and transparent but neither had the desired effect.
N.B. I know this can be done with a JavaScript solution but if possible I'd prefer a pure css3 solution.
So it seems you can't reference the original colour in keyframes. However, you can just specify one keyframe in a keyframes declaration and let the browser interpolate the colors for you. Using a keyframe of just 50% will use the original properties at 0% (aka from) and 100% (aka to).
With this knowledge we can also effectively queue animations using animation-delay to create what looks like a single animation, but isn't.
For example:
#keyframes fadeblue {
50% {
background-color: blue;
}
}
#keyframes fadewhite {
50% {
background-color: white;
}
}
.thing1 {
background-color: red;
animation: fadeblue 2s,
fadewhite 2s 2s;
/* shorthand here is: animation-name animation-duration animation-delay */
}
.thing2 {
background-color: green;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing3 {
background-color: yellow;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing4 {
background-color: purple;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
<div class="thing1">Thing 1</div>
<div class="thing2">Thing 2</div>
<div class="thing3">Thing 2</div>
<div class="thing4">Thing 2</div>
You'll see the elements fade to blue and back to the original colour, then fade to white then the original colour.
jsfiddle for good measure.
You can achieve this if you use a pseudo-element (e.g. :before) for .thing1 and . thing2, set it's color to blue, and animate it's opacity. It's a bit more work, but I believe it will be more flexible solution:
(see working demo below)
#keyframes fadeblue {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.thing1,
.thing2 {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.thing1:before,
.thing2:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
animation: fadeblue 2s infinite;
}
.thing1 {
background-color: red;
}
.thing2 {
background-color: green;
}
<div class="thing1"></div>
<div class="thing2"></div>
Assuming I have three divs of unknown height of which one has an animated background color using a CSS keyframe animation (see http://css-tricks.com/color-animate-any-shape-2)
#-webkit-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
#-moz-keyframes super-rainbow {
0% { background: #ffff00; }
20% { background: #ffcd00; }
40% { background: #c3d74b; }
60% { background: #c3d7d7; }
80% { background: #ffc39b; }
100% { background: #ffff00; }
}
Now, there are two other divs that have a white background. On hover I want those white divs to have an animated background color as well that is in sync with the permanent color animation. I am aware that a native sync isn’t supported (see How To Sync CSS Animations Across Multiple Elements?).
My first approach would be to have three divs that all have animated background colors and cover two of them with white divs, positioned relative. On hover those white divs would then turn transparent and reveal the divs with the animated background (see http://jsfiddle.net/Vzq4B)
#permanent {
height: 100px;
margin-bottom: 15px;
width: 100%;
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
}
#hover {
position: relative;
top: -115px;
margin-bottom: -100px;
height: 100px;
width: 100%;
background: #fff;
}
#hover:hover {
background-color: transparent;
}
However, this approach will only work if I know the height of my elements, which I don’t since the content is variable.
Which other ways are there to achieve this effect for divs of unknown height?
Try placing your DIVs inside parent containers which run the animation. Child containers can then hold content and have a white background, which turns transparent using CSS on hover.
HTML:
<div id="container">
<div id="child">Your content.</div>
</div>
CSS:
#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}
Here’s a Fiddle http://jsfiddle.net/bejnar/Vzq4B/4/
Why don't you try this:
#hover:hover {
height: auto;
width: 100%;
outline: 1px solid #999; /* only style */
-webkit-animation: super-rainbow 5s infinite linear;
-moz-animation: super-rainbow 5s infinite linear;
cursor: pointer;
}
There is a link: http://jsfiddle.net/nmL9s/
Thanks...