On this page, I have a few of my elements under the video set to fade in after 15s with CSS.
The problem is that, until the elements fade in, the background below the video is Grey.
How can I change the GREY background to white (or #F3F8FC really) until my elements are finished fading? I can't seem to find the right CSS selector to change it. Here's the CSS I'm using - need to figure out how to change the color of what's behind the elements being hidden:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.enroll {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.enroll {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
}
How to Change GREY to white
Cheers.
Javascript Solution
You can use javascript instead of CSS.
function fadeIn(){
//code to fadeIn...
}
And in HTML you add on element
<div id="bg" onload="setTimeout('fadeIn()', 15000)"></div>
CSS Solution
You can use background:(here goes attributes, for example color);.
Here's example:
background:white;
Try this:
#keyframes fadeIn { from { opacity:0;background:(color-1); } to { opacity:1;background:(color-2); } }
To remove the bg, you would do like this for the col-3cm layout for example:
.col-3cm .main,
.col-3cm .main-inner
{
background: none;
}
Related
Current I am using some animations with my sliding ionic list such as sliding in from left to right and content from fading in as per this tutorial. https://www.joshmorony.com/how-to-create-animations-with-css-in-ionic/
#-webkit-keyframes animateInPrimary {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
#-webkit-keyframes animateInSecondary{
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-in-primary {
-webkit-animation: animateInPrimary;
animation: animateInPrimary;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
.animate-in-secondary {
-webkit-animation: animateInSecondary ease-in 1;
animation: animateInSecondary ease-in 1;
-webkit-animation-duration: 750ms;
animation-duraton: 750ms;
}
Now I would want the ion-items to slide one after the other. I think I have to use the css property -webkit-animation-delay. But i am not sure where to insert it. Hope someone can help. Thanks,
Ashley
If you wanted to do this with CSS animations then what you would need to do is add an incremental class to each list item and then stagger your animations accordingly as demonstrated here: CSS Animations with delay for each child element
The easier way to do this is with the built in stagger function of the animations module - take a look at this article: https://coursetro.com/posts/code/78/Creating-Stagger-Animations-in-Angular-4#
Hello I am having trouble combining both css transition and animations together. The animation is working but some reason when I add a transition, the transition works, but cancels out the animation. Anyone know how to combine them?
Here is my CSS:
.circle-spin {
transition: all 1s ease;
}
.circle-spin-reverse {
transition: all 1s ease;
}
.success li:hover .circle-spin-reverse {
animation:spin-reverse 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
.success li:hover .circle-spin {
animation:spin 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }
Sorry I know it's alot of code, but thats the bare minimum code needed for this question.
Thanks
It’s cause your transform
/* in :hover */
transform:scale(1.25);
overrides transform in animaton
/* in animation */
transform:rotate(360deg);
You have to separate transforms to different elements. See my codepen.
Is it possible to hide element 5 seconds after the page load?
I know there is a jQuery solution.
I want to do exactly same thing, but hoping to get the same result with CSS transition.
Any innovative idea? Or am I asking beyond the limit of css transition/animation?
YES!
But you can't do it in the way you may immediately think, because you cant animate or create a transition around the properties you'd otherwise rely on (e.g. display, or changing dimensions and setting to overflow:hidden) in order to correctly hide the element and prevent it from taking up visible space.
Therefore, create an animation for the elements in question, and simply toggle visibility:hidden; after 5 seconds, whilst also setting height and width to zero to prevent the element from still occupying space in the DOM flow.
FIDDLE
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#hideMe {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
HTML
<div id='hideMe'>Wait for it...</div>
based from the answer of #SW4, you could also add a little animation at the end.
body > div{
border:1px solid grey;
}
html, body, #container {
height:100%;
width:100%;
margin:0;
padding:0;
}
#container {
overflow:hidden;
position:relative;
}
#hideMe {
-webkit-animation: cssAnimation 5s forwards;
animation: cssAnimation 5s forwards;
}
#keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
#-webkit-keyframes cssAnimation {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
<div>
<div id='container'>
<div id='hideMe'>Wait for it...</div>
</div>
</div>
Making the remaining 0.5 seconds to animate the opacity attribute.
Just make sure to do the math if you're changing the length, in this case, 90% of 5 seconds leaves us 0.5 seconds to animate the opacity.
Of course you can, just use setTimeout to change a class or something to trigger the transition.
HTML:
<p id="aap">OHAI!</p>
CSS:
p {
opacity:1;
transition:opacity 500ms;
}
p.waa {
opacity:0;
}
JS to run on load or DOMContentReady:
setTimeout(function(){
document.getElementById('aap').className = 'waa';
}, 5000);
Example fiddle here.
you can hide elements on load and then show and animate them after some delay using CSS and keyframes as below
// keyframes fadeIn Animation
#keyframes fadeIn {
0% {
transform:scale(0,0);
visibility:visible;
opacity:0;
}
100% {
transform:scale(1,1);
visibility:visible;
opacity:1;
}
}
// CSS class
.containerDiv {
visibility:hidden;
animation: fadeIn 3s forwards 3s;
}
Why not try fadeOut?
$(document).ready(function() {
$('#plsme').fadeOut(5000); // 5 seconds x 1000 milisec = 5000 milisec
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='plsme'>Loading... Please Wait</div>
fadeOut (Javascript Pure):
How to make fadeOut effect with pure JavaScript
we have this h1 here
<h1 class="in">hello</h1>
and css for this is
.in{
-webkit-animation:mymove1 3s 1;
}
.in:hover {
-webkit-animation:nextT 3s 1;
-webkit-animation-fill-mode:forwards;
}
#-webkit-keyframes "mymove1"
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
#-webkit-keyframes "nextT"
{
0% {
-webkit-transform:scale(1);
}
100% {
-webkit-transform:scale(1.2);
}
}
so onload animation work properly and when i hover it grows up that's what i want but when i remove my mouse from the h1 the "mymove1" animation start again. i cloud not understand why this is happening help me out.you can also check the code working on
jsFiddle
Heres the code if you want it to change opacity on pageload & resize when you hover without the 'mymove1' animation restarting.
<style>
.in{
animation:mymove1 3s 1;
transform:scale(1);
/*If You want the hover to ease in and out*/
transition:transform 1s ease-in-out 0s;
}
.in:hover {
transform:scale(1.2);
}
#keyframes mymove1
{
0% {opacity:0;
margin-left:0px;}
100% {opacity:1;
margin-left: 8px;}
}
</style>
I'm working on my first CSS keyframe animation and would like to know how it would be possible to pause an animation after it finishes its first run-through. You can check out my site here: http://www.tommaxwell.me and the grey quote at the bottom has a hover animation that you can see. However, once the animation is over it resets. How should I go about stopping it so that it stays in the end state of the animation when it's finished?
I know the use of a keyframe animation in this case is kind of lame and unnecessary, but I'm really just testing out keyframes, and will use it better later. :)
As #Mr. Alien answered, transitions is to prefer for this, but since you asked - it is possible to maintain the last state in an animation.
You do this by adding animation-fill-mode: forwards;
Here's a demo
Here's the code from my example:
HTML
<div class="text">Hover here</div>
CSS
.text {
color: blue;
}
.text:hover {
-webkit-animation: color 1.0s ease-in forwards;
-moz-animation: color 1.0s ease-in forwards;
-o-animation: color 1.0s ease-in forwards;
animation: color 1.0s ease-in forwards;
}
#-webkit-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-moz-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-o-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#keyframes color {
0% { color: blue; }
100% { color: red; }
}
Here's a good resource if you want to read about the the ‘animation-fill-mode’ property.
http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
I know what you are doing here, use CSS transition instead
Demo
.class {
color: #ff0000;
transition: color 2s;
-moz-transition: color 2s; /* Firefox 4 */
-webkit-transition: color 2s; /* Safari and Chrome */
-o-transition: color 2s; /* Opera */
}
.class:hover {
color: #00ff00;
}
You wont be able to preserve the hovered state of your text, for that you need to use JavaScript