I made a keyframe in my CSS which rotates a IMG in HTML. Now, I want to make a button that changes the rotation of the IMG from Y to X.
CSS:
*/* Rotate IMG Y */
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
/* ROTATE IMG X */
#keyframe rotateOther {
0% {transform: rotateX(0deg);}
100% {transform: rotateX(360deg);}
}*
I basically want to change ROTATE IMG Y to ROTATE IMG X by pressing a button. I am kind of new to programming and could not find any good explanation how to do this.
use insert class to change the css of div
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
animation: rotate 5s 1;
/* transform: rotate;*/
}
#keyframes rotate {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(360deg);}
}
.newstyle{
background-color: green;
animation: btnrotate 5s 1;
}
#keyframes btnrotate{
0% {transform: rotateX(360deg);}
100% {transform: rotateX(0deg);}
}
</style>
</head>
<body>
<div id="mydiv">Hello</div> <button type="button" id="rotate" onclick="myfun(event)" > rotate </button>
<br>
<script>
function myfun(event){
event.preventDefault();
console.log(event);
document.getElementById("mydiv").classList.add("newstyle");
};
</script>
</body>
</html>
Related
Is there a way to make the bar on the conic gradient rotate infinitely in a circle? This is how the gradient looks, I just want it to rotate around the center but everything I have tried hasn't worked.
If I understand what you want, just make sure you have (at least) 3 colours, and the final colour is the same as the first
P.S. I added rotation because wasn't sure what you meant by infinite rotation
div {
position:relative;
height:200px;
overflow:hidden;
aspect-ratio: 1 / 1;
border: solid black 1px;
clip-path: border-box;
}
div::before {
z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
hsl(297.3, 84.6%, 20.4%),
hsl(192.6, 51.4%, 58.0%),
hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
#keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div>Hello World</div>
Linking a CSS object to a JavaScript Object
What I mean by "Linking"
Basically, I am trying to get an object in my CSS to mimic the coordinates of my object in my Javascript code. I have the javascript object being the piece everyone will see, while when I need an animation to play I make the JavaScript Object invisible, and put an identical CSS Object in its place with an animation attached to it. Then, When the animation is done, I need the CSS Object to disappear and the JavaScript Object to Reappear. If I sound like a complete idiot, I am sorry. If you have a better way to swap them or even handle the code, PLEASE LET ME KNOW. I would also like to make this all code related, and not bring outside sources/add-ons into the programs. If you need to use HTML, that works too.
TL;DR Basically I want the CSS Object's Coordinates to mimic the JavaScripts Coordinates.
Note: The Code is just basic stuff and not from my actual game. Please take it with a grain of salt. Shape it as much as you want.
JavaScript:
Box = {
x: 20,
y: 30,
width: 100,
height: 200
}
CSS:
#Box {
left: 4px;
top: 2px;
#keyframes Box {
0% {transform: rotate(22.5deg);}
12.5% {transform: rotate(33.75deg);}
25% {transform: rotate(45deg);}
37.5% {transform: rotate(56.25deg);}
50% {transform: rotate(67.5eg);}
62.5% {transform: rotate(78.75deg);}
75% {transform: rotate(90deg);}
87.5% {transform: rotate(101.25deg);}
100% {transform: rotate(135deg);}
}
Not sure to understand perfectly, but :
If you have this html element :
<div id="box"></div>
Then its CSS :
#Box {
left: 4px;
top: 2px;
#keyframes Box {
0% {transform: rotate(22.5deg);}
12.5% {transform: rotate(33.75deg);}
25% {transform: rotate(45deg);}
37.5% {transform: rotate(56.25deg);}
50% {transform: rotate(67.5eg);}
62.5% {transform: rotate(78.75deg);}
75% {transform: rotate(90deg);}
87.5% {transform: rotate(101.25deg);}
100% {transform: rotate(135deg);}
}
and finaly in JS
Box = {
x: 20,
y: 30,
width: 100,
height: 200
};
document.getElementById('box').style.marginLeft = Box.x;
...
document.getElementById('box').addEventListener("webkitAnimationEnd",function(){
document.getElementById('box').style.marginLeft = 'initial';
});
if you are talking about two boxes that appears and disappears back to back , it can be done via CSS.
Think of your animation problem as 2 boxes that move around with
varying opacity(transparency) in the keyframe .
.BOX_1{
position:absolute;
z-index:0;
animation-name: Box1;
animation-duration: 2s;
animation-delay:100ms;
animation-iteration-count: infinite;
}
.BOX_2{
position:absolute;
z-index:0;
animation-name: Box2 ;
animation-duration: 2s;
animation-delay:100ms;
animation-iteration-count: infinite;
}
#keyframes Box1 {
0% {transform: rotate(22.5deg);opacity:0;}
25% {transform: rotate(45deg);opacity:0.25;}
50% {transform: rotate(67.5eg);opacity:0.5;}
75% {transform: rotate(90deg);opacity:0.75;}
100% {transform: rotate(135deg);opacity:1;}
}
#keyframes Box2 {
0% {transform: rotate(22.5deg);opacity:1;}
25% {transform: rotate(45deg);opacity:0.75;}
50% {transform: rotate(67.5eg);opacity:0.5;}
75% {transform: rotate(90deg);opacity:0.25;}
100% {transform: rotate(135deg);opacity:0;}
}
check out this Article on css animations here and tweak the properties like opacity as per your requirement
You can use JS libraries for very complex animations
It sounds like you want to alter the state of your interface (HTML and CSS) with JS trickery. Luckily you have a few choices.
The JS to generate a 'box' will create HTML. Apply class styles to the HTML entity and add/remove them when required:
CSS:
.hide {
display: hidden;
}
.show {
display: initial;
}
HTML:
<box id='mybox' class='show' />
And some basic JS to hide it:
$('#mybox')[0].classList.replace('show', 'hide')
But you can always just alter the target nodes styles:
var el = document.getElementById(id);
el.style.color = "red";
el.style.fontSize = "15px";
el.style.backgroundColor = "#FFFFFF";
Alternatively you could just invent a new stylesheet:
var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);
And alter an existing stylesheet:
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);
It can go deeper, with manipulating the declarations of the CSS with JS.
var styleObj = document.styleSheets[0].cssRules[0].style;
console.log(styleObj.cssText);
for (var i = styleObj.length; i--;) {
var nameString = styleObj[i];
styleObj.removeProperty(nameString);
}
console.log(styleObj.cssText);
Which allows you to write literal elements to a single rulesheet:
const rules = document.createElement('span').style;
rules.backgroundColor = 'red';
rules.cursor = 'pointer';
rules.color = 'white';
document.getElementById('style_string').innerHTML = rules.cssText;
document.getElementById('obj').style = rules.cssText;
Or mix it up with something flavoursome:
const box = document.querySelector("#mybox")
const rules = {
color: '#369',
width: '100px',
}
Object.assign(box.style, rules)
Utilising modern CSS syntax, you can write "--vars" to your sheet, then manipulate those vars using JS:
:root {
--text-color: black;
--background-color: white;
}
body {
color: var(--text-color);
background: var(--background-color);
}
var bodyStyles = document.body.style;
bodyStyles.setProperty('--text-color', 'white');
bodyStyles.setProperty('--background-color', 'black');
But it doesn't stop there and you could probably find alternative methods to achieve the same result.
References and examples:
new CSSStyleDeclaration
https://www.toptal.com/front-end/dynamic-css-with-custom-properties
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
The CSS styling for this fade in and out animation seems fine, but it is not reusable with javascript. Once the function performs once, it can not be triggered by button onClick again, what is the way around this?
//removeClass
//addClass
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
opacity: 0;
}
#-webkit-keyframes fadeinout {
50% { opacity: 1; }
}
#keyframes fadeinout {
50% { opacity: 1; }
}
<button onClick="animationfunction()">Button</button>
<div id="icon" class="elementToFadeInAndOut"></div>
You only need to have the button click add the class membership, wait until the animation is complete and then remove the class.
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
// Wait until the animation is over and then remove the class, so that
// the next click can re-add it.
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 4000);
});
.fade{
width:200px;
height: 200px;
background: red;
opacity:0;
}
.elementToFadeInAndOut {
animation: fadeInOut 4s linear forwards;
}
#keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button class="fadeButton">Button</button>
<div class="fade"></div>
The best way is to use jQuery for functions
here is the code for fade in and out effect for toggle button.
you can adjust the time by changing that (1000) in jQuery Thank you
$(document).ready(function(){
$('button.btn').click(function(){
$("div.elementToFadeInAndOut").fadeOut(1000);
$("div.elementToFadeInAndOut").fadeIn(1000);
});
});
.elementToFadeInAndOut {
width:200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<button class="btn">Button</button>
<div class="elementToFadeInAndOut"></div>
I'm looking to stop my animation on my 100% keyframe.
Here it is, jQuery is shown at bottom. What I'm trying to figure out completely is how to animate these boxes so that if you click on whichever one is on the top, it moves to the bottom, and then the bottom one moves to the top. Any ideas?
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#keyframes active {
0% {
transform: translateX(0px);
}
33% {
transform: translateX(105px);
}
66% {
transform: rotateY(180deg) translateY(210px);
}
100% {
transform: rotateY(0deg) translateY(210px);
}
}
.all-wrap {border: 1px solid black;
}
.container {width:100px;height:100px;background-color:red;
perspective:400px;perspective-origin:50% 100px;
margin-right:auto;
display: block;
border: 2px solid purple;
animation-fill-mode: forwards;
background-repeat: no-repeat;
}
.containerActive {
animation: active 3s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-style: preserve-3d;
animation-direction: normal;
}
</style>
</head>
<body>
<div class="all-wrap">
<div class="container">
</div>
<div class="container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/rotate.js"></script>
</body>
</html>
/* Here is the jQuery: */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});
Stopping on the 100% keyframe should be fulfilled with this code:
animation-fill-mode: forwards;
This has been previously addressed here:
Stopping a CSS3 Animation on last frame
I've solved it. Everything was perfect besides my key frames. Since I had it rotating 180 degrees at first, that means that it is going to rotate another 180 degrees at 100% to get back to it's original orientation. I can't declare it at 100% because I need 100% to have the correct translation. So I came up with a clever idea, how about making the rotation degrees half of what I want it to be? This would give it the appearance of a full turn.
Key frames:
#keyframes active {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, 105px);}
75% {transform: rotateY(90deg) translate(-105px, 105px);}
100% {transform: translate(0px, 105px);}
}
#keyframes active2 {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, -105px);}
75% {transform: rotateY(90deg) translate(-105px, -105px);}
100% {transform: translate(0px, -105px);}
}
I have a DIV with some text in it. I added a background image on it. Now I want to keep scrolling my DIV background image from bottom to top smoothly. For this purpose, I searched for the code and I found some codes...
<style type="text/css">
#moving_bg {
background-image:url('http://i.imgur.com/zF1zrkC.jpg');
background-repeat:repeat-y;
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
}
</style>
<div id="moving_bg">
<h2>This is my DIV text that I want do not want to move/animate.</h2>
</div>
CODE 1:) http://jsfiddle.net/ZTsG9/1/ This is a code that I found but this one have some problems with me. First of all its moving horizontally and second is that its making image width doubled to 200% that I dont want also.
CODE 2:) http://jsfiddle.net/hY5Dx/3/ This one is also moving horizontally and not making the image width doubled. But its JQuery that I dont want.
I want only CSS3 or JavaScript with HTML code to move my background image in DIV from bottom to top without doubling the image width. Is this possible in these two web languages...???
If you can get away with using 2 divs you can get it to work like this:
Working Example
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden; /* hide the overflow so .inner looks like it fits in the window*/
}
.inner {
height:200%; /* the inner div will need to be twice as tall as the outer div */
width:100%;
-webkit-animation:mymove 5s linear infinite;
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%; /* 50% height will be 100% of the window height*/
}
#-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
As per Muhammad's request i'll add my fiddle as an answer.
VanillaJS using requestAnimationFrame for that butter smooth slide :)
http://jsfiddle.net/hY5Dx/103/
Code to please SO:
var y = 0;
requestAnimationFrame(move);
var body = document.body;
function move(){
y++;
body.style.backgroundPosition = '0 ' + y + 'px';
requestAnimationFrame(move);
}
As there is too much comments after #Skynet answer, here I add the one I wrote following his base structure.
So in CSS, you can make use of animation CSS property
This property still is vendor-prefixes dependant.
Basically for what you want to do, you have to animate the background-position property, only on y axis.
Here is the CSS code
/* Following defines how the animation 'mymove' will run */
#keyframes mymove {
/* 0% is the beginning of animation */
0% {
background-position: 0 0;
}
/* This is the end… where we set it to the size of the background image for y axis (0 being the x axis) */
100% {
background-position: 0 860px;
}
}
/* same for webkit browsers */
#-webkit-keyframes mymove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 860px;
}
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
height: 366px;
text-align:center;
/* Here we assign our 'mymove' animation to the class .view, we ask it to last 3 seconds, linearly (no ease at start or end), and repeating infinitely */
animation: mymove 5s linear infinite;
/* again webkit browsers */
-webkit-animation:mymove 5s linear infinite;
background: url('http://i.imgur.com/zF1zrkC.jpg');
}
And here we are.
The other answers are ok but as mentionned, using multiple divs isn't always possible and the use of requestAnimationFrame() is also browser specific (Paul Irish has good polyfill for this).
Furthermore, I'm not sure incrementing a var infinitely is a good solution : it will block near 6100000px, and its much more code to change the speed or to take control over the animation.
<div class="view" style="background-image: url('http://i.imgur.com/zF1zrkC.jpg')">According to a new report from AnandTech.</div>
html, body {
height: 100%;
}
.view {
color:#FFFFFF;
width:1000px;
height:300px;
text-align:center;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-size: 200% 100%;
background-repeat: repeat-y;
}
#keyframes mymove {
100% {
transform: translate3d(0px, -400px, 0px);
}
}
#-webkit-keyframes mymove
/* Safari and Chrome */
{
100% {
transform: translate3d(0px, -400px, 0px);
}
}
check jsfiddle