I'm not sure how to describe it, so look at this example:
$('button').on('click', () => {
$('.spinner').addClass('paused');
});
.spinner {
}
.spinner > div {
width: 25px;
height: 25px;
background-color: #9f9f9f;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.paused > div {
-webkit-animation: sk-pause 1.4s 1 ease-in-out both;
animation: sk-pause 1.4s 1 ease-in-out both;
// -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
// animation-play-state: paused;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.3) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes sk-pause {
80%, 100% {transform: scale(0.3)}
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
transform: scale(0.3);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<button> Click </button>
You have three balls, that are bouncing. When you click the button it adds a class paused, which animates to the smallest visible ball. But when you click, they all come from 1.0 scale to 0.3 scale. I would like that they transition from their previous state to 0.3.
Please see this:
<head>
<title></title>
<style>
.spinner {
}
.spinner > div {
width: 25px;
height: 25px;
background-color: #9f9f9f;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner.paused > div {
-webkit-animation: sk-pause 1.4s 1 ease-in-out both;
animation: sk-pause 1.4s 1 ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
}
40% {
-webkit-transform: scale(1.0);
}
}
#keyframes sk-pause {
80%, 100% {
transform: scale(0.3);
}
}
#keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="spinner">
<div id="div1" class="bounce1"></div>
<div id="div2" class="bounce2"></div>
<div id="div3" class="bounce3"></div>
</div>
<input type="button" id="a" value="Pause" />
<script>
$('#a').click(function ()
{
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle2 = window.getComputedStyle(document.getElementById("div2"));
var computedStyle3 = window.getComputedStyle(document.getElementById("div3"));
$('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform);
$('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform);
$('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform);
$('.spinner').addClass('paused');
});
</script>
</body>
I do not know what is React but I think the code must be some think like this (instead of $('#a').click(function ().... block code):
$('#a').on('click', () => {
var computedStyle1 = window.getComputedStyle(document.getElementById("div1"));
var computedStyle2 = window.getComputedStyle(document.getElementById("div2"));
var computedStyle3 = window.getComputedStyle(document.getElementById("div3"));
$('#div1').css('transform', computedStyle1.transform).css('-webkit-transform', computedStyle1.transform);
$('#div2').css('transform', computedStyle2.transform).css('-webkit-transform', computedStyle2.transform);
$('#div3').css('transform', computedStyle3.transform).css('-webkit-transform', computedStyle3.transform);
$('.spinner').addClass('paused');
});
Related
I would like to rotate a div when the cursor is on the div like in this video.
I would like to use keyframes because they are more customizable
div.myElement {
...
animation: mainMenu 2s infinite;
animation-play-state: initial;
}
div.myElement:hover {
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
It doesn't work but i don't know what I need to put in my div.myElement and div.myElement:hover. In div.Element, it is 0% to 100% and 100% to 0% for div.Element:hover.
I have an animation of a box, like you code sample
https://jsfiddle.net/gnox69pv/5/
HTML
<div class="myElement"></div>
<div class="myElement"></div>
<div class="myElement"></div>
CSS
div.myElement {
background-color: red;
height: 100px;
width: 100px;
margin:10px;
animation: change_width_back 0.7s forwards;
}
div.myElement:hover {
animation: change_width 0.7s forwards;
}
#keyframes change_width {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#keyframes change_width_back {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(0deg);
}
}
try this:
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
transform: rotate(0deg);
animation-play-state: initial;
}
div.myElement:hover {
animation: mainMenu 2s infinite;
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
and if you want the box will stay in the same stage use this:
<!DOCTYPE html>
<html>
<head>
<style>
div.myElement {
width : 100px;
height : 100px;
background-color : red;
animation: mainMenu 2s infinite;
animation-play-state: paused;
}
div.myElement:hover {
animation-play-state: running;
}
#keyframes mainMenu {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div class="myElement"></div>
</body>
</html>
I need when last child (yellow square) animation ends, it starts on red square again.
I tried make for each square different animation, but that didn't work properly.
Also i tried to make infinite animation, but i want to make animation where first square translate to scale down, then up, then second square translate to scale down, then up, etc..., but with infinite animation it won't work even if i make higher delays.
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper,
.lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1) {
background: #e03318;
/* RED */
}
.upper:nth-child(2) {
background: #0daa34;
/* GREEN */
}
.lower:nth-child(1) {
background: #1662dd;
/* BLUE */
}
.lower:nth-child(2) {
background: #d1b608;
/* YELLOW */
}
.upper:nth-child(1) {
animation-delay: .5s;
}
.upper:nth-child(2) {
animation-delay: 1s;
}
.lower:nth-child(1) {
animation-delay: 1.5s;
}
.lower:nth-child(2) {
animation-delay: 2s;
}
#-webkit-keyframes scale {
50% {
transform: scale(0.2);
}
100% {
transform: scale(1);
}
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
This can be done with different animations for each rectangle:
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper, .lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1){
background: #e03318; /* RED */
}
.upper:nth-child(2){
background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
background: #d1b608; /* YELLOW */
}
.upper:nth-child(1) {
animation: scale-1 2s infinite;
}
.upper:nth-child(2) {
animation: scale-2 2s infinite;
}
.lower:nth-child(1) {
animation: scale-3 2s infinite;
}
.lower:nth-child(2) {
animation: scale-4 2s infinite;
}
#-webkit-keyframes scale {
50% { transform: scale(0.2); }
100% { transform: scale(1); }
}
#keyframes scale-1 {
0% { transform: scale(1); }
12.5% { transform: scale(0.2); }
25% { transform: scale(1); }
}
#keyframes scale-2 {
25% { transform: scale(1); }
37.5% { transform: scale(0.2); }
50% { transform: scale(1); }
}
#keyframes scale-3 {
50% { transform: scale(1); }
62.5% { transform: scale(0.2); }
75% { transform: scale(1); }
}
#keyframes scale-4 {
75% { transform: scale(1); }
87.5% { transform: scale(0.2); }
100% { transform: scale(1); }
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
My toggled class rotates an element clockwise on 180 degrees when assigned. How can I modify my css to rotate an element from 180 to 0 degrees clockwise when toggled class removes?
var el = document.getElementById("wrapper");
el.addEventListener("click", function(){
this.classList.toggle("toggled");
});
#wrapper {
position: relative;
top: 20px;
left: 20px;
padding: 10px;
cursor: pointer;
display: inline-block;
}
#wrapper.toggled {
transform: rotateZ(180deg);
}
#wrapper > div {
width: 35px;
height: 3px;
margin-bottom: 10px;
background-color: #3f51b5;
}
#wrapper > div:last-child {
margin-bottom: 0;
}
#wrapper, #wrapper > div {
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
}
#wrapper.toggled >div:first-child {
transform: rotateZ(45deg) rotateY(45deg) translateX(14px) translateY(-3px);
}
#wrapper.toggled >div:last-child {
transform: rotateZ(-45deg) rotateY(45deg) translateY(3px) translateX(14px);
}
<div id="wrapper">
<div></div>
<div></div>
<div></div>
</div>
I did some edits on your script and style and it work fine : https://jsfiddle.net/IA7medd/rkk0zc8k/
HTML:
<div id="wrapper">
<div></div>
<div></div>
<div></div>
</div>
css:
#wrapper {
position: relative;
top: 20px;
left: 20px;
padding: 10px;
cursor: pointer;
display: inline-block;
transform: rotateZ(0deg);
}
#wrapper > div {
width: 35px;
height: 3px;
margin-bottom: 10px;
background-color: #3f51b5;
}
#wrapper > div:last-child {
margin-bottom: 0;
}
#wrapper, #wrapper > div {
transition-property: transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
}
#wrapper.toggled >div:first-child {
transform: rotateZ(45deg) rotateY(45deg) translateX(14px) translateY(-3px);
}
#wrapper.toggled >div:last-child {
transform: rotateZ(-45deg) rotateY(45deg) translateY(3px) translateX(14px);
}
.animated {
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.notAnimated {
-webkit-animation-duration: 0s;
-moz-animation-duration: 0s;
-o-animation-duration: 0s;
animation-duration: 0s;
}
#-webkit-keyframes rotate180 {
0%{transform: rotateZ(0deg);}
100% {transform: rotateZ(180deg);}
}
#-moz-keyframes rotate180 {
0%{transform: rotateZ(0deg);}
100% {transform: rotateZ(180deg);}
}
#-o-keyframes rotate180 {
0%{transform: rotateZ(0deg);}
100% {transform: rotateZ(180deg);}
}
#keyframes rotate180 {
0%{transform: rotateZ(0deg);}
100% {transform: rotateZ(180deg);}
}
.animated.rotate180 {
-webkit-animation-name: rotate180;
-moz-animation-name: rotate180;
-o-animation-name: rotate180;
animation-name: rotate180;
}
#-webkit-keyframes rotate360 {
0%{transform: rotateZ(180deg);}
100% {transform: rotateZ(360deg);}
}
#-moz-keyframes rotate360 {
0%{transform: rotateZ(180deg);}
100% {transform: rotateZ(360deg);}
}
#-o-keyframes rotate360 {
0%{transform: rotateZ(180deg);}
100% {transform: rotateZ(360deg);}
}
#keyframes rotate360 {
0%{transform: rotateZ(180deg);}
100% {transform: rotateZ(360deg);}
}
.animated.rotate360 {
-webkit-animation-name: rotate360;
-moz-animation-name: rotate360;
-o-animation-name: rotate360;
animation-name: rotate360;
}
#-webkit-keyframes rotate0 {
0%{transform: rotateZ(360deg);}
100% {transform: rotateZ(0deg);}
}
#-moz-keyframes rotate0 {
0%{transform: rotateZ(360deg);}
100% {transform: rotateZ(0deg);}
}
#-o-keyframes rotate0 {
0%{transform: rotateZ(360deg);}
100% {transform: rotateZ(0deg);}
}
#keyframes rotate0 {
0%{transform: rotateZ(360deg);}
100% {transform: rotateZ(0deg);}
}
.animated.rotate0 {
-webkit-animation-name: rotate0;
-moz-animation-name: rotate0;
-o-animation-name: rotate0;
animation-name: rotate0;
}
the script:
var el = document.getElementById("wrapper");
var counter = 1;
el.addEventListener("click", function(){
this.classList.toggle("toggled");
if(counter > 2){
counter = 1;
this.classList.toggle("rotate360");
}
if(counter == 1){
this.classList.toggle("rotate180");
}
else if(counter == 2){
this.classList.toggle("rotate180");
this.classList.toggle("rotate360");
}
counter++;
});
Another Solution :
And this is another option but using jquery : https://jsfiddle.net/IA7medd/pr9akayk/
in the option you will need only to change your script like this :
var currentRotate = 0;
var $el = $("#wrapper");
$('#wrapper').click(function(){
currentRotate+=180;
$(this).toggleClass('toggled');
$el.css({ WebkitTransform: 'rotate(' + currentRotate + 'deg)'});
$el.css({ '-moz-transform': 'rotate(' + currentRotate + 'deg)'});
})
I want to create a div which automatic slides in when calling the webpage and the ability to close it with a X and if not press X automatic closes after 5 sec.
So lets say: from top of webpage slide in and div is 200px width and is 200px height.
How can I create that with css3 transitions?
Follow below code for your slider div using css3:
First add below CSS in your html:
<style>
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity:0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
</style>
Now, add the below code in your body part:
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>
then finally add the below script after the end of the body:
<script>
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
</script>
Finally, your html is ready to execute....
I'm sure this'll help you solve out your issue and if it's does then don't forget to mark my answer... (^_^)
Thanks...
setTimeout(function() {
document.getElementById('divSlider').className = 'close';
}, 5000);
function closeMe() {
document.getElementById('divSlider').className = 'close';
}
.slider {
background: #000;
color: #fff;
height: 20px;
position: relative;
padding: 30px;
-moz-animation-name: dropSlider;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1s;
-webkit-animation-name: dopSlider;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
animation-name: dropSlider;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1s;
}
#-moz-keyframes dropSlider {
0% {
-moz-transform: translateY(-250px);
}
100$ {
-mox-transform: translateY(0);
}
}
#-webkit-keyframes dropSlider {
0% {
-webkit-transform: translateY(-250px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropSlider {
0% {
transform: translateY(-250px);
}
100% {
transform: translateY(0);
}
}
#divSlider.close {
opacity: 0;
}
button {
position: absolute;
top: 0px;
right: 0px;
}
<div align='center'>
<div id='divSlider' class='slider' style='height:200px; width:200px; border:solid;'>
<button type='button' onclick='closeMe();'>X</button>
<h1>Slider Div</h1>
</div>
</div>
I'm using CSS keyframe animations to create some simple animated text and animation-fill-mode:forward is working for most of it to keep the properties after the animation fires except for the video element. It goes back to it's previous state. I cannot find anything that would be causing it.
Here's a codepen.
HTML:
<div class="fade-in first">
<h1 class="shrink first">Take a sigh of relief</h1></div>
<div class="fade-in second"><h1 class="shrink second">Bluebeam is not your typical software company</h1></div>
<div class="fade-in animation third">
<h1>Why? Well we often have conversations like this</h1>
</div>
<div class="row zoom-in">
<div class="col-md-10 col-md-offset-1">
<div class="flex-video widescreen">
<iframe width="560" height="315" src="//www.youtube.com/embed/brWPoUWUCJs" frameborder="0" allowfullscreen></iframe>
</div>
See more of these<i class="icon-caret-right"></i>
</div>
</div>
SASS:
.home-animation {
padding-top:60px;
}
.fade-in {
animation-name: fadeInUp;
animation-iteration-count: once;
animation-duration: 2s;
&.first {
max-height: 10px;
}
}
.fade-in.second {
max-height: 30px;
opacity:0;
animation-delay:3s;
animation-fill-mode: forwards;
}
.fade-in.third {
opacity:0;
animation-duration: 3s;
animation-delay:7s;
animation-fill-mode: forwards;
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.shrink {
animation-name: zoomOut;
animation-iteration-count: once;
animation-duration: 2s;
}
.shrink.first {
animation-delay:3s;
animation-fill-mode: forwards;
}
.shrink.second {
animation-delay:7s;
animation-fill-mode: forwards;
}
#keyframes zoomOut {
0% {
transform: scale(1) translateY(0);
color: $black;
}
100% {
transform: scale(.5) translateY(-100px);
color: $gray;
}
}
.zoom-in {
animation-name: zoomIn;
animation-iteration-count: once;
opacity:0;
animation-delay:10s;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8);
}
50% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
It's because you defined only 0% and 50% in your zoomIn animation. Using 100% instead works.
#keyframes zoomIn {
0% {
opacity: 0;
transform: scale3d(.8, .8, .8);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
http://codepen.io/anon/pen/jPLKRp