I have an element
<form class="fade-in-form">...</form>
with an animation
.fade-in-login-form{
opacity: 0;
-webkit-animation: fadein 2s; !important;
-webkit-animation-delay: 3s; !important;
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1; !important;
}
}
and I want the element to be invisible at first, but then fading in.
The problem is that the form is invisible at first (opacity: 0;), then fades in, but after the animation flashes to be invisible again! Why doesn't the animation overwrite the initial value of opacity: 0; with opacity: 1;? And how can I achieve what I want?
If the solution requires Javascript: I prefer AngularJS over jQuery.
An animation by default only applies as long as it is running. When it ends running, it no longer applies
If you want to change this behaviour, you need to use the animation-fill-mode property
In your case, the value is forwards
animation-fill-mode: forwards;
(With prefixes if needed)
First, syntax-wise, I think you should not have a semi-colon between your values and !important (not a good one to use, by the way) :
-webkit-animation: fadein 2s !important;
Second, I guess the styles are not applied because your elements are not loaded ; if you set display to block on the form and set it back to block after page content is loaded with javascript (see code below), does it work better ?
document.addEventListener("DOMContentLoaded", function(event)
{
document.getElementById("form").style.display = "block";
});
codepen example
Just leave off the opacity: 0; in your first selector:
.fade-in-form {
-webkit-animation: fadein 2s 3s; /* Chrome, Opera 15+, Safari 5+ */
animation: fadein 2s 3s; /* Chrome, Firefox 16+, IE 10+, Opera */
}
#-webkit-keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes fadein {
0% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As #sodawillow mentioned try never ever to use !important but if you really have to use it like this: property-name: property-value !important;
Related
I'm currently trying to implement or test a new feature on my locally hosted page which plays video with subtitles on. The subtitle format being VTT.
I've been trying to find how to actually be able to edit the VTT itself as I am trying to give a fading out effect for the subtitle.
This probably won't be helpful but I just tried implementing it via the style.css part of my project but sadly it only affects the texts of the page and I am not sure how to make it work for the texts from the VTT file itself.
Down below is the part I've tried to work out on the style.css
.fade-in {
animation: fadeIn 2s;
}
.fade-out {
animation: fadeOut 3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
There is a ::cue selector to modify the subtitle text on a video.
But not all css properties are allowed.
You can change the color or opacity but you can not set the animation property.
Anyway, what you could do is to use css variable to set the opacity and the css variable could change with an animation
:root {
--opacity-value: 1
}
::cue {
opacity: var(--opacity-value);
}
#keyframes flickerAnimation {
0% { --opacity-value: 1; }
50% { --opacity-value: 0; }
100% { --opacity-value: 1; }
}
video{
animation: flickerAnimation 1s infinite;
}
An working example could be found here.
Just wondering whats the best way to go about having the logo in top left corner to fade in after about 5 seconds after user has been on page?
Here is the http://jsfiddle.net/elroyz/sjD8X/ with the logo in the corner
body {
background-color:#000;}
i only put this in because it wouldnt let me post without code
i read something about jquery delay but i know next to nothing about it so thought there might be another option
Thanks in advance
$('img').delay(5000).fadeOut(250);
This will fade out the img after 5 seconds. The time in the code is in ms.
Fore more info on this see
api.jquery.com/delay/
api.jquery.com/fadeout/
api.jquery.com/fadein/
try to use this transitions.
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
goodluck!
HTML
<img onload="this.style.opacity='1';" src="image path" />
CSS
img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}
CSS 3 animation. (With vendor prefixes because it is still new and experimental):
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#logo {
-webkit-animation: fadein 5s infinite;
-moz-animation: fadein 5s infinite;
-o-animation: fadein 5s infinite;
animation: fadein 5s infinite;
}
is there a way to make this css3 javascript animation smooth and fine please see the linkjsfiddle
css animation i use is given below
.pageanim
{
/* Safari and Chrome */
-webkit-animation:nextpage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: left;
-webkit-transform-style: preserve-3d;
}
.hideface
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
#-webkit-keyframes nextpage /*Safari and Chrome*/
{
from {-webkit-transform:rotatey(0deg); }
to {-webkit-transform:rotatey(-180deg);
}
}
.revpageanim
{
/* Safari and Chrome */
-webkit-animation:prepage 1s;
-webkit-animation-timing-function:linear;
-webkit-transform-origin: 100% 0% 0px;
}
#-webkit-keyframes prepage
{
from {-webkit-transform:rotatey(0deg);}
to {-webkit-transform:rotatey(90deg);}
}
By adding the animation-fill-mode property, you can choose whether it is the first or last frame of the animation that should be kept at the end of the animation:
animation-fill-mode: forwards;
https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode
Is there a way to fade elements (at least just text) in and out going left to right or vice-versa using only CSS?
Here is an example of what I mean:
Actually, if it requires jQuery, I'll accept that too, just as a second priority.
Yes, you can do it with CSS3 animations (check browser support here).
Here's a simple demo for text-fading.
HTML:
.text {
position:relative;
line-height:2em;
overflow:hidden;
}
.fadingEffect {
position:absolute;
top:0; bottom:0; right:0;
width:100%;
background:white;
-moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
-webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
-ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
-o-animation: showHide 5s ease-in alternate infinite; /* Opera */
animation: showHide 5s ease-in alternate infinite;
}
#-webkit-keyframes showHide { /* Chrome, Safari */
0% {width:100%}
40% {width:0%}
60% {width:0%;}
100% {width:100%;}
}
#-moz-keyframes showHide { /* FF */
0% {width:100%}
40% {width:0%}
60% {width:0%;}
100% {width:100%;}
}
#-ms-keyframes showHide { /* IE10 */
0% {width:100%}
40% {width:0%}
60% {width:0%;}
100% {width:100%;}
}
#-o-keyframes showHide { /* Opera */
0% {width:100%}
40% {width:0%}
60% {width:0%;}
100% {width:100%;}
}
#keyframes showHide {
0% {width:100%}
40% {width:0%}
60% {width:0%;}
100% {width:100%;}
}
<div class="text">
There is some text here!
<div class="fadingEffect"></div>
</div>
CSS:
As you can see, there's a sharp contrast on the borders. If you use an image gradient instead of a pure white background it will render better.
Then, you can use a jQuery fallback for IE9 and below.
In photoshop or other image editing software, create a circular area that is transparent in the middle and on all sides fades out to solid white. Feel free to crop the top/bottom as needed. You can then use css transitions to animate the graphic from left to right to achieve the effect in your demo. For browsers like IE that don't support transitions, use the cssHooks feature in jquery to perform the animations with jQuery.
You could create this effect using css gradients, but you run into browser support issues, and using transitions on css gradients is very bad in terms of performance. However, simply animating a png24 is very easy and makes the same effect.
I found a plugin which contains multiple text animations.
https://tobiasahlin.com/moving-letters/
Demo : https://jsfiddle.net/Danzoftw/hp8qL1e3/7/
var textWrapper = document.querySelector('.demo');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.demo .letter',
opacity: [0,1],
easing: "easeInOutQuad",
duration: 2250,
delay: (el, i) => 150 * (i+1)
}).add({
targets: '.demo',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<h1 class="demo">Text animation demo</h1>
Hope this helps others. Cheers.
I'm trying to have images fade in with css3 once they're loaded. The problem is the way my methods are currently chained it fades it in and out for a split second twice. instead of just being blank and fading in.
my solution was to try and split out the animation code into a seperate class that i apply AFTER i initially set the opacity to zero (i do this in JS so people without js enabled can still see the images).
It's still not working though
I assume its because in this code its setting the opacity to zero and immediately adding an animation transition class which somehow catches the opacity .css() method while its changing still (dont know how this is possible,... shouldnt it complete opacity before moving on to add class?)
// nice thumbnail loading
$('.thumb').css('opacity','0').addClass('thumb-animated').on('load', function(){
$(this).css('opacity','1');
});
.resources .thumb-animated {
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-ms-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
Well...
Why do you set opacity to 1 in jQuery?
If you want to use CSS3 and not simply fadeIn(200) why don't you add "opacity: 1" to css class thumb-animated?
EDIT:
Note that load will not be triggered if the image is already in cache.
Also, !important has to be added to rewrite the rule modified via javascript.
There you go: http://jsfiddle.net/enTCe/5/
This seems to work perfectly outside JSfiddle, on JSfiddle looks like it waits for all the images to be loaded.
What about using just css animations? No JS code is needed.
#-webkit-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes opacityChange {
0% { opacity: 0; }
100% { opacity: 1; }
}
.thumb {
width: 200px;
height: 200px;
opacity: 1;
-webkit-animation: opacityChange 5s;
-moz-animation: opacityChange 5s;
-ms-animation: opacityChange 5s;
}
You can wait adding the class to the image is loaded
$('.thumb').css('opacity','0').on('load', function(){
$(this).addClass('thumb-animated').css('opacity','1');
});
Try something like this:
$('#thumb').hide();
myImg = $('<img>').attr('src', 'thumb.png').load(function(){
$('#thumb').html(myImg).fadeIn(200);
});