I am working on an animation and I was wondering what were the rules for the #keyframe identifier.
For instance, I was doing the following but it didn't work.
Code:
#banner {
width: 468px;
height: 60px;
background-color: red;
color: white;
text-align: center;
padding-top: 30px;
font-weight: bold;
font-size: 2em;
animation-name: #banner;
animation-duration: 4s;
}
#keyframes #banner {
from: {background-color: red;}
to: {background-color: green;}
}
<div id="banner">Just a banner</div>
The #keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: The !important rule is ignored in a keyframe
Read more at https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
Related
I have been trying to get this to work for a while.
The point is that the inner div will have some shape and there will probably more than one (That's why I used the nth-child selector).
This inner div is supposed to be shown and then be hidden again both for some set amount of time.
the problem is, that I would like to animate all the (later) multiple inner divs in one animation. For this I thought I could use CSS variables, but this does not seem to work.
What I am trying to archieve in this example is the inner div basically just blinking by using the variable. But my result in Firefox is just a black box.
Am I missing anything? I already looked up if one could even use CSS variables in #keyframes and sure enough you can.
The only problem with them in animations seems to be that they are not interpolated in between but that they suddenly switch which is not a problem in this case.
#keyframes test{
from{
--one: 0;
}
to{
--one: 1;
}
}
#test{
width: 100px;
height: 200px;
background-color: black;
animation: test 1s infinite;
}
#test :nth-child(1){
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
}
<div id="test">
<div></div>
</div>
This can be achieved by defining variables using (as of writing this, not well-supported) #property, which allows declaring types and that allows the browser to "understand", for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.
Example Code:
#property --opacity {
syntax: '<number>'; /* <- defined as type number for the transition to work */
initial-value: 0;
inherits: false;
}
#keyframes fadeIn {
50% {--opacity: 1}
}
html {
animation: 2s fadeIn infinite;
background: rgba(0 0 0 / var(--opacity));
}
The current types that are allowed include:
length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-list, transform-function, custom-ident (an identifier string)
Helpful articles:
https://web.dev/at-property/#writing-houdini-custom-properties
https://css-tricks.com/using-property-for-css-custom-properties
Cool Houdini demos
As stated in the specification:
Animatable: no
and also
Notably, they can even be transitioned or animated, but since the UA
has no way to interpret their contents, they always use the "flips at
50%" behavior that is used for any other pair of values that can’t be
intelligently interpolated. However, any custom property used in a
#keyframes rule becomes animation-tainted, which affects how it is
treated when referred to via the var() function in an animation
property.
So even if you use opacity with var() in the keyframes it won't animate:
#keyframes test {
from {
--one:0;
opacity: var(--one);
}
to {
opacity: var(--one);
--one: 1;
}
}
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
animation: test 1s infinite;
}
<div id="test">
<div></div>
</div>
By the way you can make it working if you use it as a transition because in this case you will apply a transtion to the opacity and not the custom property:
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test:hover {
--one:1;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
transition:1s all;
}
<div id="test">
<div></div>
</div>
I know in css, the unordered list bullet image can be change by following code:
ul { list-style-image: url(image)}
can I use an animation like
width: 25px;
height: 25px;
background: red;
animation: mymove 5s infinite;
}
#keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
as the bullet image? if not, then how to use animated image as bullet image?
To change the color of the bullet you need to modify the color property of the list but this will make your text color change too, so you need to wrap your text inside other element, like a <span> and modify its color too.
Then you can create a keyframe animation with the color property changing and apply it to the list as you did.
ul li {
color: red;
animation: animate 4s linear infinite;
}
ul li span {
color: black;
}
#keyframes animate {
0% {
color: red;
}
50% {
color: blue;
}
100% {
color: red;
}
}
<ul>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ul>
This is becoming easier with new features in Chrome and Firefox so keep updated!
Btw it is not related to javascript
I'm creating an animation https://codepen.io/adsler/pen/bGNWxOe and I've created a div class. I've adjusted this with css. It works. However, as soon as I introduce another div class, it's not only effected by the first, but there seems to be no way of selecting it with css.
So here is the original:
Html:
<div
class="random">four<br>
three<br>zero<br>nine</div>
Css:
.random {background.
color:red;background-image:
linear-gradient(black,
white); width: 10px; height:
200px; font-weight: 900;
position:relative; font-
size:20px; left: 20x;
top:60px; filter:sepia(0);
color:black; border-radius:
100px; box-shadow: 90px 90px
30px 90px #000; text-align:
center;}
.random {animation: turn 30s
ease-in infinite; animation.
direction: alternate.
reverse;animation-delay:
2s;}
#keyframes turn {
0%
{transform:rotate(1400deg);
width: 1px} 30%.
{transform:rotatex(7000deg);
font-size: 30px;} 40%
{transform:rotatez(360deg);
width: 13em} 70%
{width: 10em;}100%
{opacity: 0.9;}
That's fine but then, when I introduce the next sequence, by way of a div class, I can't find the selector with css and the style is influenced by the first div.
<div
class="starring">Starring
</div>
.starring {margin-top: 500px
!important; font-size: 50px
!important;}
So I tried specificity.
.random.starring {margin.
top: 500px
!important; font-size: 50px
!important;}
Still unable to select starring with css and style still influenced by previous div.
In your codepen under the html section you have one too many ending 's in the first part.
Like this:
<div class="random">four<br>three<br>zero<br>nine</div></div>
<div class="starring">Starring</div>
Which should be:
<div class="random">four<br>three<br>zero<br>nine</div>
<div class="starring">Starring</div>
Next thing is - you don't end your animation in your css part
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
Here you need a last } to actually wrap up the turn tag.
Like this:
#keyframes turn {
0%{transform:rotate(1400deg);
width: 1px}
30%{transform:rotatex(7000deg);
font-size: 30px;}
40% {transform:rotatez(360deg);
width: 13em}
70% {width: 10em;}100%
{opacity: 0.9;}
}
Make these changes and it works as supposed.
.starring {
color:red;
}
Works for me.
The problem is you are missing a closing } for your turn keyframe.
#keyframes turn {
0% {
transform:rotate(1400deg);
width: 1px
}
30% {
transform: rotatex(7000deg);
font-size: 30px;
}
40% {
transform: rotatez(360deg);
width: 13em
}
70% {
width: 10em;
}
100% {
opacity: 0.9;
}
}
And then for your second div, this will work:
.starring {
margin-top: 500px !important;
font-size: 50px !important;
}
I feel best solution here would be giving css to 1 element.
Add position:absolute to 1 of the element. And further accordingly adjust the element wherever you want using margin-bottom and margin-left!
I have been trying to get this to work for a while.
The point is that the inner div will have some shape and there will probably more than one (That's why I used the nth-child selector).
This inner div is supposed to be shown and then be hidden again both for some set amount of time.
the problem is, that I would like to animate all the (later) multiple inner divs in one animation. For this I thought I could use CSS variables, but this does not seem to work.
What I am trying to archieve in this example is the inner div basically just blinking by using the variable. But my result in Firefox is just a black box.
Am I missing anything? I already looked up if one could even use CSS variables in #keyframes and sure enough you can.
The only problem with them in animations seems to be that they are not interpolated in between but that they suddenly switch which is not a problem in this case.
#keyframes test{
from{
--one: 0;
}
to{
--one: 1;
}
}
#test{
width: 100px;
height: 200px;
background-color: black;
animation: test 1s infinite;
}
#test :nth-child(1){
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
}
<div id="test">
<div></div>
</div>
This can be achieved by defining variables using (as of writing this, not well-supported) #property, which allows declaring types and that allows the browser to "understand", for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable.
Example Code:
#property --opacity {
syntax: '<number>'; /* <- defined as type number for the transition to work */
initial-value: 0;
inherits: false;
}
#keyframes fadeIn {
50% {--opacity: 1}
}
html {
animation: 2s fadeIn infinite;
background: rgba(0 0 0 / var(--opacity));
}
The current types that are allowed include:
length, number, percentage, length-percentage, color, image, url, integer, angle, time, resolution, transform-list, transform-function, custom-ident (an identifier string)
Helpful articles:
https://web.dev/at-property/#writing-houdini-custom-properties
https://css-tricks.com/using-property-for-css-custom-properties
Cool Houdini demos
As stated in the specification:
Animatable: no
and also
Notably, they can even be transitioned or animated, but since the UA
has no way to interpret their contents, they always use the "flips at
50%" behavior that is used for any other pair of values that can’t be
intelligently interpolated. However, any custom property used in a
#keyframes rule becomes animation-tainted, which affects how it is
treated when referred to via the var() function in an animation
property.
So even if you use opacity with var() in the keyframes it won't animate:
#keyframes test {
from {
--one:0;
opacity: var(--one);
}
to {
opacity: var(--one);
--one: 1;
}
}
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
animation: test 1s infinite;
}
<div id="test">
<div></div>
</div>
By the way you can make it working if you use it as a transition because in this case you will apply a transtion to the opacity and not the custom property:
#test {
width: 100px;
height: 200px;
background-color: black;
}
#test:hover {
--one:1;
}
#test :nth-child(1) {
width: 20px;
height: 20px;
margin: auto;
background-color: white;
opacity: var(--one,0);
transition:1s all;
}
<div id="test">
<div></div>
</div>
So I made a CSS animation with keyframe where the background color of the element and the font color changes. The problem is, when it comes to the last frame, the colors get reset to the default ones. I used the animation-fill-mode and it helps to maintain the end size but the colors still reset? This is the code:
#keyframes anim{
0% {background-color: #404880; color: #DCE0F7;}
90% {background-color: #747AA6; color: #242D5E;}
100% {font-size: 19px;}
}
.apply{
font-size: 15px;
background-color: #404880;
border-radius: 5px;
border-style: none;
color: #DCE0F7;
}
.apply:hover{
animation: anim;
animation-duration: .5s;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation-fill-mode:forwards; /*IE 10+*/
animation-fill-mode:forwards; /*when the spec is finished*/
}
When you set animation-fill-mode: forwards, the state as at the last keyframe would be retained for the element even after the animation is complete. Here, you've not set value for either background-color or color in last keyframe (which is, the 100% frame) and so it goes back to the original value that was provided for the element (the default or un-hovered state). If you want it to retain the state as at 90% frame then the properties and its values should be carried over to the 100% frame also (even though there is no change).
For exactly the same reason that is mentioned above, you don't require the 0% frame in your settings because it has the same value as the default state of the element. The 0% frame is generally required only when the state at the start of the animation needs to be different from the default state.
#keyframes anim {
90% {
background-color: #747AA6;
color: #242D5E;
}
100% {
font-size: 19px;
background-color: #747AA6;
color: #242D5E;
}
}
.apply {
font-size: 15px;
background-color: #404880;
border-radius: 5px;
border-style: none;
color: #DCE0F7;
}
.apply:hover {
animation: anim;
animation-duration: .5s;
animation-fill-mode: forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='apply'>Test content</div>