I am stuck trying to trigger a CSS animation.
My CSS:
h3[id="balance-desktop"]{
color: black;
-webkit-animation-name: gogreen;
-webkit-animation-duration: 2s;
animation-name: gogreen;
animation-duration: 2s
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes gogreen {
from {color: black;}
to {color: limegreen;}
from{color: limegreen;}
to{color: black;}
}
/* Standard syntax */
#keyframes gogreen {
from {color: black;}
to {color: limegreen;}
from{color: limegreen;}
to{color: black;}
}
It is a basic animation that changes color of a h3[id=balance-desktop] element.
The animation works when the page loads. I am trying to get it to work when I call my java script function but I am unable too.
Attempt #1:
function showGreenAmiamtion(){
var test = document.getElementById("balance-desktop");
test.style.webkitAnimationName = 'gogreen';
test.style.webkitAnimationDuration = '4s';
}
Attempt #2:
function showGreenAmiamtion(){
document.getElementById("balance-desktop").style.webkitAnimationName = "";
setTimeout(function ()
{
document.getElementById("balance-desktop").style.webkitAnimationName = "gogreen";
}, 0);
}
I tried all answers from How to activate a CSS3 (webkit) animation using javascript?, no luck.
Is something wrong with my code?
Your attempt 2 works - just cleaned up your code a bit to remove the webkit prefixes (which are a few years outdated). I'm setting the animationName to 'none' inline, and then removing that so the element goes back to using its original CSS animation name.
Also, having multiple from and tos in a keyframe animation won't work, so I formatted it to work with percentages.
var btn = document.getElementById("button");
var text = document.getElementById("balance-desktop");
function turngreen() {
text.style.animationName = 'none';
setTimeout(function() {
text.style.animationName = null;
}, 0);
}
btn.addEventListener('click', turngreen);
#balance-desktop {
color: black;
animation: gogreen 2s;
}
#keyframes gogreen {
0%, 100% { color: black; }
50% { color: limegreen; }
}
<h3 id="balance-desktop">Heading</h3>
<button id="button">Turn Green</button>
For something like this, a CSS Transition might be more simple.
Also, all major browsers support CSS3 Animations and Transitions these days, so unless you are targeting old browsers, you can drop the vendor prefixes.
// Get DOM references:
var btn = document.querySelector("button");
var h3 = document.querySelector(".balance-desktop");
// Set up trigger for transition function. This is a button
// click in this example, but the function can be called anytime
// you like.
btn.addEventListener("click", function(){
// By changing a style property on the element that had previously
// been set, and if that element has been set up for transitions
// on that property, the transition will be activated.
h3.classList.add("goGreen");
// After the transition to the new style is complete
// we'll remove that style, effectively causing a
// transition back to the original style. It's important
// that the delay is set to at least the time of the transition.
// Two seconds in this case.
setTimeout(function(){
h3.classList.remove("goGreen");
},2000);
});
.balance-desktop{
color: black;
/* Set the element to transition on all properties
that have been set over the course of 2 seconds. */
transition:2s all;
}
.goGreen {
color: limegreen;
}
<h3 class="balance-desktop">Hello</h3>
<button>Run Function</button>
Related
I would like to know whether it is possible to adjust the contents of CSS keyframes, as I have seen a variety of suggestions online but none of them seem to work for me.
These are the keyframes I have:
#keyframes changeColor {
0% {
color: yellow;
}
50% {
color: red;
}
}
#-moz-keyframes changeColor {
0% {
color: yellow;
}
50% {
color: red;
}
}
#-webkit-keyframes changeColor {
0% {
color: yellow;
}
50% {
color: red;
}
}
#-o-keyframes changeColor {
0%{
color: yellow;
}
50% {
color: red;
}
}
I would like to be able to adjust the color attribute for each one of the above keyframes through Javascript, so that the colours can be changed according to the value passed through Javascript. Is this possible in any way?
Thank you
Animating KeyFrame using jQuery is possbile using jQuery.Keyframes
var supportedFlag = $.keyframe.isSupported();
$.keyframe.define([{
name: 'roll-clockwise',
'0%': {
'color' : 'green'
},
'100%': {
'color' : 'yellow'
}
}
]);
$("p").playKeyframe({
name: 'changeColor',
duration: 2000
});
For more info please see this link.
https://github.com/Keyframes/jQuery.Keyframes
This might work better entirely in Javascript, with the only consistent CSS attribute that should always be on the element a transition attribute: transition: color 0.5s ease-out for example.
Then in javascript you could have a setInterval alternate between colors somehow:
// Note that this is psuedocode and will need to be refactored slightly to better fit your own code
// variables storing color values
var colorA = 'red',
colorB = 'blue';
//store element you are changing in a variable
const ELEMENT = document.querySelector('element');
function changeColors() {
// store current color value of ELEMENT in a variable called currentColor
let currentColor = ELEMENT.style.color;
// if color is currently A, switch to B
if (currentColor == colorA) {
ELEMENT.style.color = colorB;
}
// else, switch to A
else {
ELEMENT.style.color = colorA;
}
}
// call set interval to alternate colors with same timing value as set in transition attribute in CSS
setInterval(changeColors, 500);
That's just one way it could be done in javascript, but the main takeaway here is that, at the end of the day, it's probably a lot more feasible to do it all in javascript rather than with CSS animations.
I can't seem to find a standard way to animate the switching between the current rendered scene in Three.js. I have simplified my implementation as follows:
var sceneIndex;
var currentScene;
switch (sceneIndex) {
case 1:
currentScene = scene;
break;
case 2:
currentScene = scene1;
break;
}
And when I want to switch the scene:
if (clickEvent) {
sceneIndex = 2
}
The scene is rendered like this:
renderer.render(currentScene, camera); //I use only one camera
Right now, this produces a sudden cut off to the next scene which is not user friendly. What I want is a simple fade to black animation when the variable currentScene changes. What way would you suggest to achieve this? Thanks.
You could do this without the need of Three.js. Just place a div covering the canvas and animate it to fade to black screen and back. You wait half the time the animation takes and change the screen at that point (using setTimeout()).
Step-by-step process:
Place a div on top of your canvas (you should be using absolute positioning)
Add a CSS class that includes an animation (see example below)
Setup the keyframes for the animation (see example below)
Trigger then animation by:
Remove the class from the element
Act on the element (e.g. div.offsetWidth)
Add the class to the element
The animation will trigger when an element has the class. Then, it will play until it finishes or the element loses the class, whatever comes first.
Here's an example:
var color = "#0000FF";
function changeScene() {
// Trigger animation
var div = document.getElementById("curtain");
div.classList.remove("screen-change");
div.offsetWidth;
div.classList.add("screen-change");
// Trigger scene change
setTimeout(function() {
// Your real code should go here. I've added something
// just to demonstrate the change
color = color == "#0000FF"? "#FF0000" : "#0000FF";
document.getElementById("render").style.background = color;
}, 1000);
};
div {
width: 160px;
height: 90px;
}
#render {
background: #0000FF;
}
#curtain {
background: black;
opacity: 0;
}
.screen-change {
animation-name: screen-change;
animation-duration: 2s;
}
#keyframes screen-change {
0% {opacity: 0;}
30% {opacity: 1;}
/* Waiting time */
70% {opacity: 1;}
100% {opacity: 0;}
}
<div id="render"><div id="curtain"></div></div>
<button id="scene-changer" onclick="changeScene()">Change scene</button>
This solution is very cheap (it uses CSS animations, which are supported by most major browsers) and looks very nice.
I have a block which content is being dynamically changed by script and I want that content not to change instantly, but fade out and then fade in with new content.
I want that done without jQuery — pure JS and CSS.
I am trying to do this in such a way:
I've defined transparent and opacle classes in CSS with transition set to 2s, and wanna toggle that classes for block with content when the content changes. As I expect it should smoothly fade out old content and fade in new content. But in fact content just changes instantly.
CSS:
.non-opacle {
opacity:0;
transition: opacity 2s linear;
}
.opacle {
opacity:1;
transition: opacity 2s linear;
}
HTML
<div class="alert alert-info" id="wrapper">
<p id="text-box">…</p>
</div>
JS
var textBox = document.getElementById('text-box');
window.onload = function () {
var failCounter = 0;
var current = notes[Math.floor(Math.random() * 12)];
textBox.className = 'opacle';
textBox.innerHTML = '…';
function keyClicked(event) {
if (event.target.className.split(' ')[1] === current) {
textBox.className = 'non-opacle';
textBox.innerHTML = '*some altered content*';
textBox.className = 'opacle';
…
In JS I initially set content wrapper block to 'opacle' class with initial content, and then on certain conditions, I set it to 'non-opacle', change block's innerHTML to place relevant content, and set the class back to 'opacle'.
But no animation occurs( What am I doing wrong?
Your problem is that you're adding and removing the opacity at the same time, before the initial transition has had time to complete.
What you need to do is delay the changing of the innerHTML and resetting of the opacity until the transition has completed.
Here's a very simple looping example to illustrate the principle, the important part to note is the setTimeout.
var p=document.getElementById("change"),text=["One","Two","Three","Four","Five"],x=0,interval=setInterval(function(){
x++;if(x===text.length)x=0;
p.classList.add("hide");
setTimeout(function(){
p.innerHTML=text[x];
p.classList.remove("hide");
},500);
},2000);
#change{
color:#000;
font-family:arial;
padding:5px;
transition:opacity .5s linear;
}
.hide{
opacity:0;
}
<p id="change">One</p>
The browser is not going to wait for transitions to complete before setting the class back to opacle.
This simple working fiddle moves the transition out to a separate selector, and uses a transitionend event listener, to wait for the element to be completely faded out before changing the content and fading it back in.
http://jsfiddle.net/0m3Lpwxo/1/
CSS:
.opacle {
opacity:1;
}
.non-opacle {
opacity:0;
}
#test {
transition: opacity 1s linear;
}
html:
<div id="test" class="non-opacle">this is content</div>
<button onclick="toggle()">toggle</button>
js:
function transitionEnded() {
var el = document.getElementById('test');
el.innerHTML = "hello.";
el.classList.remove('non-opacle');
}
function toggle() {
var el = document.getElementById('test');
el.addEventListener("transitionend", transitionEnded, true);
el.classList.add('non-opacle');
}
You probably just need to define browser specific styles along side your current definition (for example: -webkit-transition: opacity 2s linear;)
Also, I would say that instead of adding the transition redundantly to both classes, target something about your element that's not going to change, like its ID and define the transition style rules there. That way you will keep your CSS more DRY.
Here's the best reference material for dealing with CSS transitions: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Try this:
<div id="myElement">Text</div>
function fadeOut(id,val){
if(isNaN(val)){ val = 9;}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val>0){
val--;
setTimeout('fadeOut("'+id+'",'+val+')',90);
}else{return;}
}
function fadeIn(id,val){
if(isNaN(val)){ val = 0;}
document.getElementById(id).style.opacity='0.'+val;
//For IE
document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
if(val<9){
val++;
setTimeout('fadeIn("'+id+'",'+val+')',90);
}else{return;}
}
Referred from this.
I have used following JS:
function change(){
var d = document.getElementById("div");
d.className = d.className + " non-opacle";
setTimeout(function(){
d.className = "opacle";
d.innerHTML = "TEST";
},1000);
}
See following DEMO, with CSS:
.opacle {
opacity:1;
transition: opacity 1s linear;
}
.non-opacle {
opacity:0;/* No need to add transaction here */
}
I am wondering if it is possible to make a button background image or text change to another text or image along with the button shape on mouse hover?
Say I had a button having a certain text or background image shoving the symbol ✓ (checkmark) and I wish it to change shape (from a circle to a rectangle) and text (from checkmark to the word submit) on mouse hover.
Is it possible using CSS, JS or both?
Without Changing Animations
JSFiddle
If you just want to change the background image and shape, you can use pure CSS
.button {
height:30px;
width:60px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
background-image:url(...)
}
.button:hover {
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
background-image:url(...)
}
If you want to change the text, you need JavaScript.
<style>
#button {
height:30px;
width:60px;
border-radius:15px;
background-image:url(img1.png);
}
</style>
<script>
function mouseOver() {
document.getElementById("button").style.backgroundImage = "url(img2.png)";
document.getElementById("button").style.borderRadius = "0px";
document.getElementById("button").innerHTML = "Submit";
}
function mouseOut() {
document.getElementById("button").style.backgroundImage = "url(img1.png)";
document.getElementById("button").style.borderRadius = "15px";
document.getElementById("button").innerHTML = "✓";
}
</script>
<div id="button" onmouseover="mouseOver()" onmouseout="mouseOut()">✓</div>
With Changing Animations
JSFiddle
To animate the button, use the
-webkit-transition:all 0.2s;
transition:all 0.2s;
functions. Every property that is changed in the :hover css, is automatically animated with a duration of 0.2 seconds.
If you also want the text to change (in my example fading in and out) it gets a little more complicated. (Disclaimer: My solution is probably not the most elegant one, but it works.)
Add two more classes to your CSS, .fade-out and .fade-in.
.fade-out {
opacity: 1;
animation: fadeOut 0.2s;
}
.fade-in {
opacity: 0;
animation: fadeIn 0.2s;
}
In this case I wanted the text animation to be a little longer than the border animation (I think it looks better), but if they should be the same length, you have to set each of the animations to 0.1s
Then add two #keyframes animations, fadeOut and fadeIn like this:
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
Now the tricky part, the JavaScript:
function mouseIsOver() {
btn = document.getElementById("button_java");
btn.childNodes[0].className += ' fade-out';
setTimeout(function(){
btn.childNodes[0].innerHTML = "Submit";
btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-out', '');
btn.childNodes[0].className += ' fade-in';
setTimeout(function(){
btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-in', '');
}, 200);
}, 200);
}
function mouseIsOut() {
btn = document.getElementById("button_java");
btn.childNodes[0].className += ' fade-out';
setTimeout(function(){
btn.childNodes[0].innerHTML = "✓";
btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-out', '');
btn.childNodes[0].className += ' fade-in';
setTimeout(function(){
btn.childNodes[0].className = btn.childNodes[0].className.replace(' fade-in', '');
}, 200);
}, 200);
}
childNodes[0] gets all inner children (tags), and chooses the first one
className += ' fade-out' adds the class 'fade-out' to the elements class list. There needs to be a space in front of the added class name, just so if there are classes already defined, they won't combine into one non-existent class
setTimeout(function,waitduration) runs the code in function after it waitet waitduration milliseconds. Match this length to the duration of your animation in the .fade-out{...} class in your CSS-file
className.replace(' fade-out','') replaces the fade-out class in the elements list of classes with an empty string to remove it. Don't forget to remove the space, too.
Your Personalized Button
JSFiddle or PasteBin
I've copied the code from your page, added a <p> wrap around the text in the button, and added
.button p {
line-height:1em;
margin:0;
}
to the CSS.
Then you need to import jQuery by adding
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
into the head. Then add another code snippet,
<script type="text/javascript">
$( document ).ready(function() {
$("#subscribe_button").hover(
function() {
txt = $("#subscribe_button").children("p");
txt.fadeOut(100, function() {
txt.html("Sottoscrivi");
txt.fadeIn();
});
}, function() {
txt = $("#subscribe_button").children("p");
txt.stop(true,false).fadeOut(100, function() {
txt.html("✓");
txt.fadeIn();
});
}
);
});
</script>
That should be it!
I'm trying to create a fading out and fading in effect using JavaScript and CSS3. The goal is to have a div shrink in width when clicked and have the text contained within it simultaneously fade out. Then when it is clicked again, the div expands back to its normal width, and the text fades back in.
Here is the HTML:
<div id="box1" onclick="slide1()">
<p class="fader">Lorem ipsum.</p>
</div>
Here is the CSS:
#box1 {
position:relative;
left:0%;
top:0%;
width: 70%;
height: 100%;
background-color: #666;
z-index:4;
}
Here is the javascript:
var box1
var fader
window.onload = function() {
box1 = document.getElementById('box1');
fader = document.getElementsByClassName('fader');
}
function slide1(){
if(box1.style.width=='10%'){
box1.style.width='70%';
fader[0].style.opacity='1';
fader[0].style.transition='opacity 0.25s ease-in';
}
else {
box1.style.width='10%';
fader[0].style.opacity='0';
fader[0].style.transition='opacity 0.75s ease-in';
}
}
It's working for the fade-out, but for the fade-in it is immediately transitioning from 0 opacity to 1 opacity... there's no fade-in. Any ideas?
I actually asked a very similar question with the same issue a while back: Opacity effect works from 1.0 to 0, but not 0 to 1.0. Check the out and see if it works for you.
Otherwise, try adding a class to the fader element instead of adding a style declaration. Then, in your actual CSS, write the code for the fader element transition.
I guess you use even firefox or opera? I think your code won't work on safari or chrome since transition needs webkit-prefix on those browsers. You can use following code to get transition support:
var transform = (function () {
var transforms = [
'OTransform',
'MozTransform',
'msTransform',
'WebkitTransform'
], transform = 'transform';
while (transform) {
if (document.body.style[transform] === undefined) {
transform = transforms.pop();
} else {
return transform;
}
}
return false;
}());
When im using CSS-transition, sometimes I change transition style and then let browser update changes before changing other styles. You can do this with timeout. On some browsers I have noticed that animation is not working unless doing that (some firefox browsers).
fader[0].style.transition='opacity 0.75s ease-in';
setTimeout(function () {
box1.style.width='10%';
fader[0].style.opacity='0';
}, 4);