I have this html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animation.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<div class="box box-anim-start box-anim-end"></div>
<script src="jquery-2.1.4.min.js"></script>
<script src="JavaScript.js"></script>
</body>
</html>
As you can see there are two stylesheets linked to this page.
StyleSheet code
.box {
height: 100px;
width: 100px;
background-color: red;
}
animation code
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 2s;
transition-delay: 5s;
}
And here's the JavaScript code
var box = $(".box").eq(0);
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var rule0 = rules[0];
rule0.style.transform = "translateX(100px)";
var rule1 = rules[1];
rule1.style.transform = "translateX(0px)";
What I wanted was an animation upon opening this page. And, since the delay is mentioned in css, i thought that would work. But it didn't. Could you explain why?
It's makes a lot more sense to define your CSS animation in your CSS using keyframes, you can then call it in by adding a class to your box once the page has loaded.
So initially remove the .box-anim-start class
<div class="box"></div>
Then define the animation using keyframes:
#keyframes slide {
0%{
transform: translate(0, 0)
}
100% {
transform: translate(100px, 0)
}
}
Then call the animation within .box-anim-start
.box-anim-start {
animation: slide ease-in 2s;
animation-delay: 2s;
}
.box{
transition: 2s ease-in;
}
And finally add the class once the page has loaded using jQuery
$(document).ready(function){
$('.box').addClass('.box-anim-start');
});
The best way is to use the stylesheet.
In Chrome, for instance, your line:
var rules = sheet.cssRules || sheet.rules;
is wrong because rules is null. This happens because you need to change the index to
var sheet = document.styleSheets[0]; // instead of 1 in my case
But consider to put a delay between the two transition.
Instead, if you want simply use the js with your styles you can do:
$(function () {
$('div.box').css('transform', 'translateX(100px)').delay(3000).queue(function (next) {
$(this).css('transform', 'translateX(0px)');
next();
});
});
.box {
height: 100px;
width: 100px;
background-color: red;
}
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 1s;
transition-delay: 2s;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="box box-anim-start box-anim-end"></div>
Related
I'm trying to call a CSS animation on the event that this button is pressed, after doing some research it seems classList is the way forward. It's late and I think I'm being stupid but I cannot get it to work.
HTML:
<body>
<img id="myID" class="mouse" src="mouse.png" onclick="ani()">
<script src="script.js"></script>
</body>
<head>
<link href="styles.css" rel="stylesheet"/>
</head>
JavaScript:
function ani()
{
document.getElementById('myID').classList.add = 'animate';
}
CSS:
.animate
{
animation: test 1s linear forwards;
}
#keyframes test
{
100%
{
transform: translateX(calc(8%));
}
}
add is a function so the way you are using classList needs a slight change from:
document.getElementById('myID').classList.add = 'animate';
to:
document.getElementById('myID').classList.add('animate');
function ani(){
document.getElementById('myID').classList.add('animate');
}
.animate {
animation: test 1s linear forwards;
}
#keyframes test {
100% {
transform: translateX(calc(8%));
}
}
<body>
<img id="myID" class="mouse" src="https://stock.wikimini.org/w/images/d/d4/Mickey_Mouse.png" onclick="ani()">
</body>
I made this
http://codepen.io/adamchenwei/pen/dOvJNX
and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.
Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part?
Cross browser capacity will be great.
SCSS
.myItem {
height: 100px;
width: 501px;
background-color: beige;
animation: to-left-transition 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
HTML
<div class="myItem">
stuff here
</div>
Found out a better way. Soooooo much easier!
I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.
Hope it helps someone else to save couple hours!
http://codepen.io/adamchenwei/pen/xRqYNj
HTML
<div class="myItem">
stuff here
</div>
CSS
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
transition: transform 1s;
}
JS
setTimeout(function() {
document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
console.log('ran');
}, 3000);
EDIT
Below is a method sugguested by Dennis Traub
setTimeout(function() {
console.log('ran');
$("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
stuff here
</div>
Answer Before EDIT
Here is a good reference for something similar to what i think you are trying to accomplish.
Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.
var boxOne = document.getElementsByClassName('box')[0],
$boxTwo = $('.box:eq(1)');
document.getElementsByClassName('toggleButton')[0].onclick = function() {
if(this.innerHTML === 'Play')
{
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue('margin-left');
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click', function() {
if($(this).html() === 'Play')
{
$(this).html('Pause');
$boxTwo.addClass('horizTranslate');
} else {
$(this).html('Play');
var computedStyle = $boxTwo.css('margin-left');
$boxTwo.removeClass('horizTranslate');
$boxTwo.css('margin-left', computedStyle);
}
});
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
This code was written by Zach Saucier on codepen
This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/
I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: grey;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 20px;
display:block;
margin-left:auto;
margin-right:auto;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "images/bill-gates.jpg";
} else {
img.src = "images/Card.jpg";
}
}
function outbillFunction(img) {
var Out = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src="images/Card.jpg";
}
else {
img.src = "images/bill-gates.jpg";
}
}
/* End of JavaScript code */
</script>
<img id="BillGate" src="images/bill-gates.jpg" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)" onmouseout="outbillFunction(this)"/>
</body>
</html>
Hello! This is my code and im wondering how i can change image every second without hovering over it, so it basically spins around but changes image every second. I want the pictures to be images/bill-gates.jpg and images/Card.jpg Thanks for your help!
Remove the function call from onmouseover and out add the following code.
window.setInterval(function()
{
/// call your function here
}, 1000);
Remove both of the Mouse Overs, and implement the setInterval method
However;
Make sure you can default pack to the original, as you have two functions originally, I'd personally go for modifying your two existing function into one bigger one so when you call the function in the method setInterval, your function checks for both cases and replaces accordingly.
I hope this helps a little.
I want to add some transition when #div getting timeout. I also add webkitTransition in setTimeout method but not found transition. please help me also edit my code.
<!DOCTYPE html>
<html>
<body>
<style>
#div {
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
background:#BD5557;
position: absolute;
height: 500px;
width: 960px;
}
</style>
<div id="div">Display out after 1 second</div>
<script>
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){ x.style.display='none';x.style.webkitTransition = 'opacity 2s ease-in-out';
x.style.transition = 'opacity 2s ease-in-out';}, 1000);
}
displayOut();
</script>
</body>
</html>
</body>
</html>
The problem is that you are trying to apply display:none; at the same time you apply the transition.
Also there is no need to reapply all the css transition properties if they are declared in the css.
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){
x.style.opacity='0';
}, 1000);
}
displayOut();
Here is a working example