Fiddle : https://jsfiddle.net/7p9uv16b/
I have few blocks rotated with different angles at start. I want to translate them along the rotated axis, on click. But the translation animation reset the rotation angle. I know that I can chain transformation to rotate + translate, but I need multiple animations for that (one per block). Do CSS provides a way to keep the current state as reference for new transformation ?
Html:
<button type="button" onclick="move()">
Animate blocks
</button>
<button type="button" onclick="reset()">
Reset
</button>
<div id="s1" class="square">
</div>
<div id="s2" class="square">
</div>
CSS:
.square{
height: 50px;
width: 50px;
background-color: #58ACFA;
margin: 100px;
}
.move{
-webkit-animation: move 2s both;
animation: move 2s both;
}
#-webkit-keyframes move {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
#keyframes move {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
Javascript:
$('#s1').css('transform','rotate(45deg)');
$('#s2').css('transform','rotate(30deg)');
function move(){
$('.square').addClass('move');
}
function reset(){
$('.square').removeClass('move');
}
You can use CSS variables.
.square {
--position: 0px;
--angle: 0deg;
-webkit-transform: translateX(var(--position)) rotate(var(--angle));
transform: translateX(var(--position)) rotate(var(--angle));
}
#s1 {
--angle: 45deg;
}
#s2 {
--angle: 30deg;
}
#keyframes move {
0% {
--position: 0px;
}
100% {
--position: 100px;
}
}
Related
My Custom CSS Loader
.LoaderWrap {
width:100%;
margin-top:25px;
box-sizing:border-box;
}
.sampleContainer {
float:left;
height: 40px;
width: 100%;
margin:10px 10px 20px 10px;
box-sizing:border-box;
}
.loader,
.loader.Large {
position:absolute;
left:50%;
box-sizing:border-box;
}
.dot,
.loader.Large .dot {
display: inline-block;
margin-top:20px;
width: 8px;
height: 8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.loader.Large .dot {
width: 24px;
height: 24px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius: 12px;
}
/** Large Dots **/
.loader.Large .dot_1 {
animation: LargeDot1 1.5s linear infinite;
left:38px;
}
#keyframes LargeDot1 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(180deg) translateX(-38px); }
75% { transform: rotate(180deg) translateX(-38px); }
100% { transform: rotate(360deg) translateX(-38px); }
}
.loader.Large .dot_2 {
left:76px;
animation: LargeDot2 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot2 {
0% { transform: rotate(0deg) translateX(-38px); }
25% { transform: rotate(-180deg) translateX(-38px); }
75% { transform: rotate(-180deg) translateX(-38px); }
100% { transform: rotate(-360deg) translateX(-38px); }
}
.loader.Large .dot_3 {
left:38px;
animation: LargeDot3 1.5s linear infinite;
}
#keyframes LargeDot3 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(180deg) translateX(38px); }
75% { transform: rotate(180deg) translateX(38px); }
100% { transform: rotate(360deg) translateX(38px); }
}
.loader.Large .dot_4 {
left:76px;
animation: LargeDot4 1.5s linear infinite;
animation-delay: 0.5s;
}
#keyframes LargeDot4 {
0% { transform: rotate(0deg) translateX(38px); }
25% { transform: rotate(-180deg) translateX(38px); }
75% { transform: rotate(-180deg) translateX(38px); }
100% { transform: rotate(-360deg) translateX(38px); }
}
<div class="LoaderWrap clearfix">
<div class="loader Large">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
So What's Wrong?
Nothing is 'wrong' as such, feel free to use this loader by all means! However I would like to make this more interesting, turn the dots into stars for example and maybe even go one step further by having the dots (circles) transform into different shapes.
As much as I love CSS and consider myself to be an expert, animating CSS is fairly new to me whereas this is the first CSS animation I have made and I want to make this more unique and crazy for the theme of the website I am working on, not to say that I don't love this loader and asking for, call it improving my skills?, means people will also use, but nevertheless, it is a learning path!
Minimal Question:
How can I have myh dots (circles) as starts OR have my dots (circles) tranform into different shapes, whether it is transforming from basic squares to circles or whatnot using pure CSS and/or JS/jQuery?
I want the text to slide in and then when it gets centered wait for a few then continue and repeat the process. Anyone know how to do this?
Below is my code:
<marquee direction="left" id="artistslide">
<span id="currentartist"><i class="fa fa-spinner fa-spin"></i></span>
</marquee>
<marquee direction="right" id="currentsongslide">
<span id="currentsong"><i class="fa fa-spinner fa-spin"></i></span>
</marquee>
Then i have JS to do a timer but its not always right since its constantly timing itself:
var start = true;
setInterval(passStartMarquee, 3000 );
// adjust the delay
function passStartMarquee()
{
if (start) {
document.getElementById('currentsongslide').start();
document.getElementById('artistslide').start();
start = false;
} else {
document.getElementById('currentsongslide').stop();
document.getElementById('artistslide').stop();
start = true;
}
}
Here is a code found on this tutorial
.example1 {
height: 50px;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 10s linear infinite;
-webkit-animation: example1 10s linear infinite;
animation: example1 10s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes example1 {
0% {
-moz-transform: translateX(100%);
}
40% {
-moz-transform: translateX(0%);
}
60% {
-moz-transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
}
}
#-webkit-keyframes example1 {
0% {
-webkit-transform: translateX(100%);
}
40% {
-webkit-transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-100%);
}
}
#keyframes example1 {
0% {
-moz-transform: translateX(100%);
/* Firefox bug fix */
-webkit-transform: translateX(100%);
/* Firefox bug fix */
transform: translateX(100%);
}
40% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
60% {
-moz-transform: translateX(0%);
/* Firefox bug fix */
-webkit-transform: translateX(0%);
/* Firefox bug fix */
transform: translateX(0%);
}
100% {
-moz-transform: translateX(-100%);
/* Firefox bug fix */
-webkit-transform: translateX(-100%);
/* Firefox bug fix */
transform: translateX(-100%);
}
}
<div class="example1">
<h3>I'll pause so you can read me.</h3>
</div>
<div class="example1">
<h3>I'll pause so you can read me.</h3>
</div>
I need to get a JS script to get this center arrow image (loading.svg) to rotate 360 degrees every .75 seconds on a continuous loop. Here is the button I'm talking about.
http://royalidea.com/happyname/pending.html
It would been to be a class so that several of these icons could be rotating simultaneously - several loading items at time...
Any help would be much appreciated!
Here is CSS answer:
JSFIDDLE
.loading_arrow {
width: 32px;
margin-top: 13px;
margin-left: 42%;
-webkit-animation: rotation .75s infinite linear;
-moz-animation: rotation .75s infinite linear;
-o-animation: rotation .75s infinite linear;
animation: rotation .75s infinite linear;
}
body {
background-color:#000;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
#-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
#-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Here's a CSS solution which will spin 360deg every 0.75s with a 0.75s delay. If you want the delay to be longer or shorter, just play with the 50% portion of 50%, 100% and adjust the animation time accordingly.
img.loading_arrow {
-webkit-animation: spin_delay 1.5s linear infinite;
animation: spin_delay 1.5s linear infinite;
}
#-webkit-keyframes spin_delay {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
50%, 100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
#keyframes spin_delay {
0% {
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
50%, 100% {
-webkit-transform: rotate3d(0, 0, 1, 360deg);
-ms-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
}
}
JS Fiddle: http://jsfiddle.net/3na66ug3/
HTML:
<!DOCTYPE html>
<html style="-webkit-overflow-scrolling: touch;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rotate HTML elements by mouse in JavaScript - Propeller.js</title>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
<link rel="stylesheet" href="example/css/turbine.css">
</head>
<body>
<img id="turbine" src="example/img/turbine.png" onmousedown="showLibraryInfo()" ontouchstart="showLibraryInfo()">
<div class="arrow">
<img src="example/img/arrow.png">
<p>
Drag or swipe propeller
</p>
</div>
<script src="src/propeller.js"></script>
<script>
new Propeller(document.getElementById('turbine'), {inertia: 0.99});
function showLibraryInfo() {
if (window.libInfoShown !== true) {
var windStuff = document.getElementsByClassName('wind');
var libStuff = document.getElementsByClassName('propeller');
for (var i = 0; i < windStuff.length; i++) {
var obj = windStuff[i];
obj.style.display = 'none';
}
for (var i = 0; i < libStuff.length; i++) {
var obj = libStuff[i];
obj.style.display = 'inline-block';
}
window.libInfoShown = true;
}
}
</script>
</body>
</html>
CSS:
body, html {
background-color: #2d2d2d;
width: 100%;
height: 100%;
font-size:0.8em;
font-family: "Helvetica Neue", "Helvetica", "Arial";
color: #ffffff;
}
#turbine {
width: 70%;
height: auto;
position: absolute;
left: 5%;
z-index: 99;
}
.turbine {
width: 100%;
height: auto;
}
.arrow {
position: relative;
top: 5%;
left: 5%;
width: 70%;
}
Demo: http://pixelscommander.com/polygon/propeller/example/jquerygrid.html#.VAX2ASiaWJI
Source: http://www.techrecite.com/rotate-image-photo-or-object-around-its-axis-using-javascript-animation/
I would suggest using an animated gif as well, however, you can do it with JS like this:
$(function() {
var loading = $('.loading_arrow'),
degree = 0,
timer;
function rotate() {
loading.css({ transform: 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
++degree;
rotate();
},5); //lower this to increase speed
}
rotate();
});
JSFiddle
You can do this with CSS animations:
#-webkit-keyframes loader {
from {-webkit-transform: rotate(0);}
to {-webkit-transform: rotate(-360deg);}
}
#keyframes loader {
from {transform: rotate(0);}
to {transform: rotate(-360deg);}
}
img {
width: 32px;
height: 32px;
-webkit-animation: loader 1s infinite linear;
animation: loader 1s infinite linear;
}
jsFiddle Demo.
Here's a pure CSS solution with a jsFiddle demo here: http://jsfiddle.net/cay3j79t/2/
HTML
<div class="container">
<img class="loading" src="http://royalidea.com/happyname/img/loading.svg">
</div>
CSS
.container {
background-color: blue;
}
.loading {
-webkit-animation: cycle 0.75s infinite linear;
animation: cycle 0.75s infinite linear;
}
#-webkit-keyframes cycle {
from {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes cycle {
from {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
I want a bar for the bottom of my webpage that has a nice animation, similar to this one: http://css-tricks.com/pop-from-top-notification/ but stays on screen until it is closed. This is all the css I have so far:
.about {
background: black;
text-align: left;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
color: #0f0;
font-size: 21px;
font-family: Timeburner;
padding: 10px;
}
I don't care if it takes jquery or somthing else, as long as it works.
you need to add this css:
#-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(50px); }
100% { -webkit-transform: translateY(0px); }
}
#-moz-keyframes slideUp {
0% { -moz-transform: translateY(50px); }
100% { -moz-transform: translateY(0px); }
}
#note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideUp 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideUp 2.5s 1.0s 1 ease forwards;
}
here is the Fiddle Demo
here is your example with the Css animation: Fiddle (you will need to add the JS for the close button)
here is and example with slide down on close: Fiddle it uses Jquery but can also be done using pure JS:
close = document.getElementById("close");
close.addEventListener('click', function() {
$("#note").slideUp();
}, false);
Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.
Fiddle here: http://jsfiddle.net/bmh5g/
As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?
$('#trigger').on({
mouseenter: function() {
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
})
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):
CSS - in addition to the flipperUp keyframe posted by Blake above
#item.no-animation
{
animation: none;
}
jQuery
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('no-animation');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
}
})
In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>
Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake
CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)
You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.
Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.