#alert-user-message {
text-align: center;
position: absolute;
top: 200;
right: 100;
animation-name: textAnim;
animation-duration: 5s;
animation-delay: 2s;
}
#keyframes textAnim {
0% {opacity:1;}
90% {opacity:1;}
100% {opacity:0;}
}
You can see in the example vid. I attempt to fade the text with the code above but it just comes right back to 1 opacity and stays in the scene. I do NOT want this. I need the text to transition out "permanently" one way or another.
How is this done properly in CSS? There are built-in enter/exit animations in streamlabs but all their code is tucked away and unviewable.
Use animation-fill-mode: forwards; to retain its state at the end of the animation.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
Related
Discord has a nicely animated page
https://discordapp.com/
The coins are moving up and down really smoothly. How can I copy this logic for my own images?
I started with this code
img {
animation-name: move;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes move {
0% {
margin-top: 0px;
}
50% {
margin-top: 10px;
}
100% {
margin-top: 0px;
}
}
<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">
When testing the code the image is not moving smoothly. I thought using animation-timing-function: ease-in-out; would do it for me.
Is something missing there?
When it comes to animations, duration and distance moved are highly important. The type of animation is also important. Using margins instead of CSS transforms makes it less likely that the GPU will be used, which is generally better at animating than not using GPU.
Basically, your code is not a faithful recreation of the timing and animation styles as are used on discord. This is closer:
img {
animation-name: move;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
#keyframes move {
0% {
transform: translate3d(0,-4px,0)
}
to {
transform: translate3d(0,4px,0)
}
}
<img src="https://gonintendo.com/system/file_uploads/uploads/000/013/369/original/bg-header-earn-coins.png">
I am using bootstrap 3 for my web application, and I am running into and issue.
My navbar is wrapped in a container div,
my main content is wrapped in a container div adjacent to the navbar like so:
<body>
<div class="container">
//Navbar stuff
</div>
<div class="container">
//Navbar stuff
</div>
</body>
I have an animation on the body content that slides all of the content off of the screen while transitioning to a new screen. to do so I animate the left attribute to be off screen.
From what I can gather, this is causing the body width to expand beyond it's normal size, and this is causing my navbar to be affected by the position of content during the animation.
Is there a way to implement a sliding animation without increasing the width of the body, so that my navbar does not get moved during the animation?
EDIT:
To clarify how I am doing the animations, I am using CSS3 animation keyframes, and applying the class to the element I am sliding of screen. Here is the LESS that is doing this
#animation-duration: 300ms;
#animation-timing-function: ease-in-out;
#animation-fill-mode:forwards;
#animation-iteration-count: 1;
.slide-in-right{
animation-name: slideInRight;
animation-duration:#animation-duration;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
.slide-out-right{
animation-name: slideInRight;
animation-duration:#animation-duration;
animation-direction: reverse;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
.slide-in-left{
animation-name: slideInLeft;
animation-duration: 300ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: 1;
}
.slide-out-left{
animation-name: slideInLeft;
animation-direction: reverse;
animation-duration:#animation-duration;
animation-timing-function: #animation-timing-function;
animation-fill-mode: #animation-fill-mode;
animation-iteration-count: #animation-iteration-count;
}
#keyframes slideInRight{
0%{
position:relative;
left: 150%;
}
100%{
position:relative;
left:0%;
}
}
#keyframes slideInLeft{
0%{
position:relative;
left: -150%;
}
100%{
position:relative;
left:0%;
}
}
If you use transform: translateX(-100%); (where -100% is whatever you have to do to move it off screen), it shouldn't affect body width.
Also, using position: absolute; left: -100%; (again, -100% is whatever you have to do to move the element off screen), the body width shouldn't be affected, either.
I am looking for way to make addition assignment in #keyframe.
for example I want background position change infinity and just go on.
.waterwave{
background-image: url("../img/waterwave.png");
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 100s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {background-position: 100px;}
}
But I don't want to make absolute value like 100px .
I want something like backgroundPosition: "+=100" in js animation.
Is there any possibility to doing sth like that in css ?
If you have a repeating background, the position starts over at the width of the background graphic. For example, if the graphic is 300px wide, then background-position:50px looks exactly the same as background-position:350px.
So that's what you can use: move the background animation precisely the same width as the graphic, and then it will seamlessly start over. At least if you use the linear function rather than ease-in-out.
.waterwave {
background-image: url("http://lorempixel.com/300/215"); /* a 300px wide image */
height: 215px;
margin-top: -78px;
width: 100%;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear; /* changed from ease-in-out */
animation-iteration-count: infinite;
animation-direction: normal;
}
#keyframes example {
to {
background-position: 300px; /* this should be the same as the image */
}
}
<div class="waterwave"></div>
(in the example I used 5 seconds for the duration, to make the effect visible, but you get the idea.)
I have two div elements, within the one background div I have another div which uses CSS animation to display a box going up and down.
I want to make those parts of this div with the box 'disappear' as soon as any part of that box crosses over that background div.
I have an example here JSFidle, where as soon the red box exceeds the black box it should then go 'under' the black div rather than remaining at the top as it's presently.
This is the CSS code:
body{
z-index:100;
}
div{
background: black;
height:300px;
}
#scroll{
width: 200px;
height: 200px;
background: red;
position: relative;
-webkit-animation-name: test;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
animation-name: test;
animation-duration: 30s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
#keyframes test {
0% {left:0px; top:0px;}
50% {left:0px; top:270px;}
100% {left:0px; top:0px;}
}
body {
overflow-x: auto;
overflow-y: hidden;
}
What is the best way to create this effect.
You just need to add overflow: hidden to the parent div.
I sped up your animation for testing purposes.
Like so
#scrollParent{
overflow: hidden;
}
Assign a z-index to the outer-most background(the white part in the fiddle) and make it higher than the z-index of the red box. Guess that should work.
Okay, I have this text that I want to appear after 20s. I am using the animation-delay property but it is not working. Perhaps, I am doing something wrong.
Please help me out to get to right track..
Here is my code..
#import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
Here is the link on Fiddle
Thank You for everything!
EDIT ONE:
After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following
#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over.
How can I keep the text visible after the animation is done??
Thank you!
You've specified the -webkit versions in the wrong order. The -webkit-animation replaces the delay rule that you just set up. Reverse the order so that the delay comes after.
-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;
You can avoid these issues if you always set a single attribute:
-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;
Don't forget to also set:
opacity: 0;
Otherwise the text will be visible until the animation starts, and:
-webkit-animation-fill-mode: forwards;
So that the animated opacity is retained after fading in.
You need to place the animation-delay rule after the shorthand, as the shorthand is resetting your value to the default which is 0s - or you could just place it within the shorthand:
#text {
-moz-animation: fade-in 5s 15s;
-webkit-animation: fade-in 5s 15s;
animation: fade-in 5s 15s;
}
http://jsfiddle.net/wXdbL/2/ (changed the delay to 1s so it's obvious)