Please help me, Might be cause I'm fairly new to CSS Animations and Javascript but I am using a code that is suppose to change the properties of it and when I run the code it does everything else with in the code except for change the properties in CSS of the desired div. I've tried all four of these and none of them seem to work, are they out of date? Is there a new way of doing this or what? None of them work at all.
document.getElementById('playBar').style.webkitAnimationDuration = 20 + "s";
document.getElementById('playBar').style.animationDuration = 20 + "s";
document.getElementById('playBar').style['-webkit-transition-duration'] = '50s';
value = Math.floor((100 / duration) * currentTime);
document.getElementById('playBar').setAttribute("style","-webkit-filter:grayscale(" + value + "%)")
CSS CODE
#playBar {
width: 1px;
height: 12px;
background: white;
float:left;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 0s;
}
/* Chrome, Safari, Opera */
-webkit-keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
#keyframes mymove {
from {width: 0%;}
to {width: 100%;}
}
instead of
this.style['-webkit-transition-duration'] = '50s'
use
this.style.WebkitTransitionDuration="50s"
Related
My question is similar to other questions, but with a twist.
I'm trying to inject a div as follows :
var headerDiv = document.getElementById("headerDiv");
if (headerDiv) {
var logo = document.createElement('div');
logo.id = "my-header";
//logo.style.display = "none";
var innerHTML = ' <div id="my-header-image"></div>' +
' <div id="my-header-text">' +
' My header text' +
' </div> ';
logo.innerHTML = innerHTML;
headerDiv.insertBefore(logo, headerDiv.firstChild);
}
headerDiv already previously exists in the page and renders well.
I'm calling my code only when the DOM is ready.
My problem is as follows : when the injection happens, "logo" blits on the page as an entirely white div for a split second. It's almost not noticeable if you don't look well. Then the style gets applied and everything goes back to normal.
It happens both in IE11 (IE10 mode or Edge mode) AND in Chrome.
It didn't happen when I was using jQuery instead of insertBefore.
Here is the CSS :
#my-header {
pointer-events: none; /* the clicks must go through -- to the native Sharepoint buttons underneath. Required for Edge compatibility. */
display:block;
position: absolute;
text-align: center;
width: 100%;
z-index: 1000;
height: 50px;
overflow: auto;
/* fade-in */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#my-header-text {
display:inline-block;
padding: 0;
position: relative;
bottom: 15px;
margin-left: 18px;
color: white;
font-size: 1.0em;
}
#my-header-image {
display:inline-block;
content: "";
top: 3px;
left: 20px;
width : 184px; /* same size as logo image */
height : 38px;
margin-top: 6px;
background-image: url("https://MY_URL/logo.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* fade-in animation definition */
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Could it be caused by the fade-in animation? The system doesn't know how to handle a new element that's supposed to start invisible (because of the animation) ?
I've noticed that "logo" blinks above "headerDiv" instead of on top, despite its absolute positionning. One more clue of some property being ignored in the early stage of rendering, between the time when the div gets added and the time when its style gets applied.
I've solved it wth a dirty workaround :
In the JS :
...
var logo = document.createElement('div');
logo.id = "my-header";
logo.style.height = "0"; // <-- new
...
In the CSS :
#my-header {
...
height: 50px !important; /* <-- made it important */
...
}
As you can understand, the object is forcefully made invisible and forced not to take up any on-screen space (by having height = 0) between the time of its creation by the JS and the time when the style gets applied by the CSS.
Therefore, the blinking still conceptually happens but its effect is not visible.
I'm changning some html via JAvascript and I want to fade in the text.
This is the javascript:
var int = self.setInterval(function(){
if(!isPaused){
changeBG();
}
}, 3500);
function changeBG(){
//array of backgrounds
now = (now+1) % array.length ;
$('.documentary').css('background-image', 'url("' + array[now] + '")');
document.getElementById('film-detail').innerHTML = array2[now];
}
And this is my CSS which I think should cause it to fadeIn:
.documentary-bg div.film-title {
display: table-cell;
vertical-align: bottom;
bottom: 10px;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
And the HTML:
<div class='film-title' id="film-detail"></div>
I've tried a number of approaches and it won't fade in!
Why not just use css transitions?
.text {
opacity: 1;
transition: opacity 2s;
}
.text.fadeOut {
opacity:0;
}
https://jsfiddle.net/tvakyp2c/
I'm not sure what are you trying to fade in but did you know that you can just use:
$(selector).fadeIn(speed,easing,callback)
in your case would probably be:
$('.documentary-bg').fadeIn(2000);
I'm building a website and I've added a CSS keyframes animation, called by a link click (connected to a javascript function).
This is my CSS file:
#banner {
background-color: #00BBD2;
position: absolute;
width: 100%;
height: 100%;
animation-duration: 1s;
animation-name: resizeBanner;
animation-fill-mode: forwards;
animation-play-state: paused;
}
#keyframes resizeBanner {
from {height: 100%; background-color: #00BBD2}
to {height: 30%; background-color: #009688;}
}
And I'm starting the animation inside a javascript function like so:
<script>
function animate()
{
document.getElementById('banner').style.webkitAnimationPlayState = "running";
}
</script>
The animation runs perfectly in some browsers, while in others - it doesn't run at all. How can this be?
The Jquery animation that I run after the keyframes animation, however, always runs. Called like this:
$("#someid").fadeOut();
check it:
function animate() {
// Code for Chrome, Safari, and Opera
document.getElementById("banner").style.WebkitAnimationPlayState = "running";
// Standard syntax
document.getElementById("banner").style.animationPlayState = "running";
}
I am creating a Cordova hybrid app. I use the Facebookconnectplugin and show up a tutorial on first start. This works for every Supported Plattform and Version (Android / iOS) but not for Android 4.1
Here the code breaks with "Object # has no method 'remove'". It Breaks all the time at the line when I try to remove the fadeMe div. As said works everywhere else (Android 4.3+ / iOS 7+)
facebookConnectPlugin.login(["public_profile", "email", "user_friends"],
function (response) {
//check if this is startup then remove overlay
if(document.getElementById("fadeMe")){
document.getElementById("fadeMe").remove();//document.body.removeChild(div);
describeTableView();
}
}
);
CSS:
#fadeMe{
background-color: rgba(0,0,0,.75);
width: 100%;
height: 100%;
z-index: 11;
top: 0;
left: 0;
position: fixed;
color: #ffffff;
padding-left: 20px;
padding-top: 20px;
font-size: 0.9em;
font-weight: 300;
webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
And it is created like this:
var div = document.createElement("div");
div.setAttribute('class', 'fadeMe');
div.setAttribute('id', 'fadeMe');
document.body.appendChild(div);
Found a similar question but without answer: Similar Question
Using Polyfill does the trick:
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
this.parentNode.removeChild(this);
};
}
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;