I want to animate opacity from 0 to 1 so it show fade out to white animation, First I've used before pseudo element but it didn't work so I replaced it with div but got the same results here is the code:
body {
background: black;
}
.tv {
height: 100vh;
position: relative;
}
.white {
height: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: white;
z-index: 1;
opacity: 0;
/* infinite while debugging */
animation: opacity 5s ease-out infinite;
animation-fill-mode: forwards;
}
#keyframes opacity {
0%: { opacity: 0 }
100%: { opacity: 1; }
}
<div class="tv">
<div class="white"></div>
</div>
My first keyframe was like this:
#keyframes opacity {
to: { opacity: 1; }
}
What's wrong with this animation?
Remove colons after 0% and 100% and you will get the animation. Try like this:
#keyframes opacity {
0% { opacity: 0 }
100% { opacity: 1; }
}
Related
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
I have been trying this multiple ways with no success. JavaScript, TweenLite, etc. I need to alternate two <div> tags, slide1 & slide2, that live inside slide. Fading one out to fading one in. A continuous loop. I can use a basic css #keyframes animation like bellow. It works fine, but they are clickable links and one <div> will always remain on top.
Is there a way to loop the z-index of each div in the #keyframes anim?
Or maybe a completely better method?
CSS
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
}
.slide2 {
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
#keyframes fade
{
0% {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
#keyframes fade2
{
0% {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
HTML
<div class="slider">
<div class="slide1"></div>
<div class="slide2"></div>
</div>
They seem to be working for me, check it out: https://codepen.io/giovannipds/pen/LzgYaa
<style>
.slider {
line-height: 1.5;
height: 200px;
margin: 20px auto;
position: relative;
width: 300px;
}
.slide {
padding: 20px;
position: absolute;
width: 100%;
height: 100%;
}
.slide,
.slide a {
color: #fff;
}
.slide1 {
animation: fade 8s infinite;
background: red;
}
.slide2 {
animation: fade2 8s infinite;
background: blue;
}
#keyframes fade
{
0% { opacity: 1 ; z-index: 2; }
33.333% { opacity: 0; z-index: 1; }
66.666% { opacity: 0; z-index: 1; }
100% { opacity: 1; z-index: 2; }
}
#keyframes fade2
{
0% { opacity: 0; z-index: 1; }
33.333% { opacity: 1; z-index: 2; }
66.666% { opacity: 1; z-index: 2; }
100% { opacity: 0; z-index: 1; }
}
</style>
<div class="slider">
<div class="slide slide1">
<ul>
<li>Google</li>
<li>Globo.com</li>
</ul>
</div>
<div class="slide slide2">
<ul>
<li>Love Mondays</li>
<li>Hotmail</li>
</ul>
</div>
</div>
I'm trying to slide a few elements one after the other on the page.
Basically, I need to slide the first element in, and then the second after and then the third one etc etc.
Something like this:
This is what i have so far:
https://jsfiddle.net/npvsrkcy/3/
In the fiddle above, all the elements/images will slide in all at the same time which is not what i am looking for.
This is my entire code:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
Could someone please advise on this?
EDIT:
Ok, since I'm trying to use the slide animation on dynamically created elements, I can't use the normal nth-child~(number) scenario.
So I tried to do this:
img:nth-child(1n+3) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2n+2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
img:nth-child(3n+3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
but that seems to only work for the first 3 elements/images!
This is the new fiddle: https://jsfiddle.net/npvsrkcy/9/
You might try to leverage the nth-child(number) selector to delay the animation, like so:
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1;
width:100%;
/* Fix the elements being visible before the animation */
opacity: 0;
/* After the animation remain visible */
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
}
img:nth-child(1) {
-webkit-animation-delay: 0;
animation-delay: 0;
}
img:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
img:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes slide {
from { right: -150%; opacity: 0;}
to { right: 0%; opacity: 1; }
}
This would delay the animation of the second and third image element by the set amount of seconds.
Hope it helps!
Edit: just played with the fiddle, and it seems that an edit to the animation would be desirable to prevent them from showing before loading. Allow me to come up with a fix;
Edit 2: Fixed it by setting the animation-fill-mode to forwards and added an opacity effect. Another solution would be to place the image off-screen to starty with.
PS. Some further info:
https://www.w3schools.com/cssref/sel_nth-child.asp
you can try this :
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: Aslide 4s 1;
width:100%;
}
img + img {
animation: Bslide 4s 1;
}
img + img + img {
animation: Cslide 4s 1;
}
#keyframes Aslide {
0% { right: -150%; }
33.333333% { right: 0%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Bslide {
0 { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: 0%;}
100% { right: 0%;}
}
#keyframes Cslide {
0% { right: -150%; }
33.333333% { right: -150%; }
66.666666% { right: -150%; }
100% { right: 0%;}
}
Delay the animation for each div (and)
Add a fill-mode and set right value to -150% for img tag by default
img {
position: relative;
margin-left: 0%;
margin: 1em;
animation: slide 4s 1 forwards;
width:100%;
right: -150%;
}
img:nth-child(1) {
animation-delay:0s;
}
img:nth-child(2) {
animation-delay:1s;
}
img:nth-child(3) {
animation-delay:2s;
}
#keyframes slide {
from { right: -150%; }
to { right: 0%; }
}
I've written the following bit of CSS:
.bulb--off {
position: relative;
z-index: 11;
}
.bulb--on {
position: absolute;
z-index: 11;
left:rem(1);
right:0;
opacity:0;
}
.bulb--on {
opacity:0.4;
animation-name: bulbFlicker;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 1s;
}
#keyframes bulbFlicker {
0% { opacity: 1; }
25% { opacity: 0.9; }
50% { opacity: 0.95; }
75% { opacity: 0.9; }
100% { opacity: 1; }
}
What I hope to happen here is that the bulb would fade from off (opacity:0) to on (opacity:1) and then flicker.
What actually happens is that the bulb jumps from off to on (no fade) and then starts flickering, clearly what is happening is that when the animation starts it begins keyframe 1 as it should. I've tried adding a transition on opacity so that when it starts keyframe 1 it fades to it but it seems to ignore that property. Is there a way I can chain animations or even only make it play the first keyframe once?
I think I can do this using javascript but I've managed to get this far using CSS only and ideally I'd like it to remain CSS only.
If you apply two animations and add a delay to the second one equal to the length of the first animation you get the played first effect.
.light {
-webkit-animation: fade 3s;
animation: fade 3s;
opacity: 1;
}
.light .bulb {
-webkit-animation: jitter 1s infinite;
animation: jitter 1s infinite;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes jitter {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0.4;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes jitter {
0% {
opacity: 0.5;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
/*Meaningless stuff for it to look cool*/
.bulb {
width: 50px;
height: 50px;
border: 2px solid gray;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 50% 85%;
border-bottom-right-radius: 50% 85%;
background-color: yellow;
}
.metal {
margin-left: 10px;
width: 34px;
height: 10px;
background-color: gray;
border-bottom-right-radius: 10%;
border-bottom-left-radius: 10%;
}
.pole {
margin-left: 17.5px;
height: 100px;
width: 20px;
background-color: gray;
}
<div class="light">
<div class="bulb"></div>
<div class="metal"></div>
<div class="pole"></div>
</div>
is it possible to use css keyframes animation to pseudo-element such as 'before' and 'after'?
I am developing webservice for smartphone, and want to blink element. but do not want to blink element itself.
so, ways I came up with are two;
one is to cover element with another element, and blink that element;
and another is to use pseudo-element, but it seems not working.
css:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
html:
<div class="fadeElement"></div>
Firefox, Chrome, and IE10+ support this.
See more info at Chris Coyier's site: http://css-tricks.com/transitions-and-animations-on-css-generated-content/