How to control animation time from css use jQuery - javascript

I work with animation in CSS, and I have animated clock, which are working using HTML and CSS.
But I want to control animation time using jQuery.
My code:
.face {
position: absolute;
top: 10%;
left: 69%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<div class="face">
<div class="hand"></div>
</div>
As u can see at this line:
animation: hourHand 3s linear infinite;
I have time animation 3s, but this values i wanna control by jQuery code.
For example, this 3s i want to change to 14s, or 5s, or 22s.


To amend the speed with jQuery you can create some logic which controls the animation-duration property. In the example below it adds some classes to change the setting:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.removeClass('slow').addClass('fast');
});
$('#slower').click(function() {
$hand.removeClass('fast').addClass('slow');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>
I want to define the time. For example now I have 3s, but from JS script I want to change this value
In this case you can use css() to set the value in JS directly:
var $hand = $('.hand');
$('#faster').click(function() {
$hand.css('animation-duration', '1s');
});
$('#slower').click(function() {
$hand.css('animation-duration', '5s');
});
.face {
position: absolute;
top: 10%;
left: 69%;
height: 100px;
width: 100px;
border: 5px solid #d14019;
border-radius: 50%;
}
.hand {
height: 35px;
width: 5px;
background-color: #d14019;
position: absolute;
border-radius: 20%;
top: 50px;
left: 48px;
transform-origin: 50% 0%;
animation: hourHand 3s linear infinite;
}
.hand.fast {
animation-duration: 1s;
}
.hand.slow {
animation-duration: 5s;
}
#keyframes hourHand {
100% {
transform: rotate(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="face">
<div class="hand"></div>
</div>
<button id="faster">Faster</button>
<button id="slower">Slower</button>

Related

Time Based Animated Background

I have some code here that animates a full day (from sun rise to sunset):
(demo)
I'm curious to know if it is possible to make this even more dynamic, such that the animation moves with the time of day.
For Example: if it is noon, the sun should be at the highest point in the sky. Conversely, if it is midnight, the moon would be at the highest point in the sky.
I have a suspicion it can be done with a few lines of javascript:
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.html) {
'''psuedo_code'''
while true
for hour in day
move sun and moon according to currentTime
}
</script>
HTML & CSS:
<html>
<div class="canvas">
<div class="cloud"></div>
<div class="cloud a"></div>
<div class="cloud b"></div>
<div class="cloud c"></div>
<div class="land">
<div class="tree"></div>
<div class="tree a"></div>
<div class="tree b"></div>
<div class="tree c"></div>
<div class="tree d"></div>
</div>
<div class="star"></div>
<div class="star a"></div>
<div class="star b"></div>
<div class="star c"></div>
<div class="star d"></div>
<div class="wind"></div>
<!-- <div class="swirly-wind">
<span></span>
<span></span>
<span></span>
</div>
<div class="swirly-wind a"></div>
<div class="swirly-wind b"></div> -->
<div class="eclipse">
<div class="sun"></div>
<div class="sun a"></div>
<div class="moon"></div>
<div class="moon a"></div>
</div>
</div>
</html>
<style>
/*body {
position: relative;
}*/
.canvas {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
animation-delay: 1s;
background: #70c4c6;
animation-name: daylight;
animation-duration: 20s;
animation-iteration-count: infinite;
overflow: hidden;
animation-timing-function: linear;
}
.eclipse {
width: 600px;
height: 600px;
/*border: 1px solid #000;*/
position: absolute;
left:60%;
top:20%;
animation-name: time;
animation-duration: 40s;
animation-iteration-count: infinite;
z-index: 0;
animation-timing-function: linear;
}
.sun {
width:70px;
height:70px;
border-radius: 50%;
background-color: #ffa;
position: absolute;
top: -35px;
left: -35px;
}
.sun.a {
bottom: -35px;
right: -35px;
left: auto;
top:auto;
}
.moon {
position: absolute;
top: -35px;
right: -35px;
width:70px;
height:70px;
border-radius: 50%;
background-color: #fff;
}
.moon.a {
bottom: -35px;
left: -35px;
top:auto;
right: auto;
}
.cloud {
width: 50px;
height: 45px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top:20px;
left: -20%;
animation-name: cloud;
animation-duration: 70s;
animation-iteration-count: infinite;
z-index: 1;
}
.cloud::before {
content:'';
width: 35px;
height: 30px;
background-color: #fff;
margin-left: -20px;
margin-top: 10px;
display: block;
border-radius: 50%;
}
.cloud::after {
content:'';
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
right: -10px;
top: 17px;
border-radius: 50%;
}
.cloud.a {
top:150px;
animation-duration: 55s;
}
.cloud.b {
top:100px;
left:-15%;
animation-duration: 38s;
}
.cloud.c {
top:250px;
left:-10%;
animation-duration: 25s;
}
.land {
width: 100%;
height: 320px;
position: absolute;
left:-50px;
bottom: -120px;
background-color: #83a81c;
border-radius: 50%;
z-index: 1;
animation-name: land;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.land::before {
width: 100%;
height: 200px;
content: '';
position: absolute;
left: 40%;
top: 20%;
border-radius: 50%;
background-color: #96be29;
transform: rotate(-15deg);
animation-name: land1;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.tree {
width:10px;
height:40px;
background-color: #766257;
left: 200px;
position: absolute;
}
.tree::before {
content: '';
position: absolute;
bottom: 125%;
left: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 43px 20px;
border-color: transparent transparent #bfde3b transparent;
z-index: 1;
animation-name: windy;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.tree::after {
content: '';
position: absolute;
bottom:100%;
left:-25px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 60px 30px;
border-color: transparent transparent #93ae29 transparent;
}
.tree.a {
transform: scale(0.5);
left: 250px;
}
.tree.b {
transform: scale(0.75);
left: 280px;
}
.tree.c {
transform: scale(1.5);
left:450px;
top: 100px;
}
.tree.d {
transform: scale(1.25);
left: 530px;
top: 80px;
z-index: 0;
}
.star {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50px;
left: 100px;
animation-name: fader;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::before {
content: '';
width:3px;
height:3px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:20px;
top:20px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::after {
content: '';
width:2px;
height:2px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:-200px;
top:50px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star.a {
top:30px;
left:90%;
}
.star.b {
top:120px;
left:70%;
}
.star.c {
top:100px;
left:65%;
}
.star.d {
top:200px;
left:15%;
}
.swirly-wind {
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.swirly-wind > span {
width: 150px;
background-color: #eee;
height: 2px;
display: block;
position: relative;
}
.swirly-wind > span:first-child {
width: 200px;
}
.swirly-wind > span:nth-child(1)::before {
display: none;
}
.swirly-wind > span:nth-child(2) {
margin-top: -10px;
float: right;
}
.swirly-wind > span:nth-child(3) {
margin-top: 15px;
width: 75px;
float: right;
}
.swirly-wind span::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: #fff 2px solid;
bottom: calc(100% - 2px);
right: -15px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
}
.swirly-wind > span:nth-child(3)::before {
top: calc(100% - 2px);
-webkit-clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
}
.swirly-wind.a {
top:20%;
width: 75px;
animation-duration: 8s;
}
.swirly-wind.b {
top:45%;
width: 120px;
animation-duration: 15s;
height :1px;
}
.swirly-wind.b::before {
border: #fff 1px solid;
bottom: calc(100% - 1px);
}
.wind {
width: 150px;
background-color: #eee;
height: 2px;
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wind::before {
content: '';
position: absolute;
left: 200px;
width: 100px;
height: 1px;
background-color: #eee;
top:100px;
}
.wind::after {
content: '';
position: absolute;
left: 400px;
width: 180px;
height: 1px;
background-color: #eee;
top:30px;
}
#keyframes time {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes daylight {
0% { background-color: #70c4c6; }
15% { background-color: #524b64; }
40% { background-color: #354a4a; }
70% { background-color: #354a4a; }
80% { background-color: #e2b553; }
100% { background-color: #70c4c6;}
}
#keyframes land {
40% { background-color: #4d6932; }
70% { background-color: #4d6932;}
}
#keyframes land1 {
40% { background-color: #5b793e; }
70% { background-color: #5b793e;}
}
#keyframes cloud {
0% { transform: translateX(0); }
100% { transform: translateX(850px); }
}
#keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#keyframes fader {
0% { opacity: 0; }
15% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 0.4; }
70% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker {
0% { opacity: 0; }
18% { opacity: 0; }
25% { opacity: 1; }
40% { opacity: 0; }
60% { opacity: 1; }
70% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker-1 {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes windy {
15% { transform: translateX(5px); transform: rotate(5deg); }
80% { transform: translateX(7px); transform: rotate(7deg);}
80% { transform: translateX(5px); transform: rotate(5deg);}
}
#keyframes wind {
0% { left: -800px; opacity: 0 }
15% { opacity: 1; }
70% { left: 800px; opacity: 1;}
80% { left: 800px; opacity: 0;}
100% { left: -1000px; opacity: 0;}
}
#keyframes snowday {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
}
.snow.fall {
animation-name: snowday ;
animation-duration: 5s;
}
</style>

Contents are rotating with loader

I am trying to create a loader component in my application for that I have used the following code.
CSS
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#maincontainer:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#maincontainer:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
HTML
<div id="app">
<div id="maincontainer">
I have some contents here
</div>
</div>
Loader is working fine but the issue is the content inside the inner div also rotating with the loader. I want the contents to be stable in the page and only rotate the loader.
Jsfiddle link
Can some one please help me to resolve this.

The easiest solution by far is going to be to simply put the animation on a different element than the contents you don't want animated.
(Incidentally: it's no longer necessary to include those vendor-specific -webkit and -ms prefixed CSS elements; animation and transform have been broadly supported for years now.)
#app {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#spin, #maincontainer {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
/* Combining the repeated declarations: */
#spin, #spin:before, #spin:after {
content: "";
position: absolute;
border-radius: 50%;
border: 3px solid transparent;
}
#spin {
border-top-color: #3498db;
animation: spin 2s linear infinite;
}
#spin:before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #e74c3c;
animation: spin 3s linear infinite;
}
#spin:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #f9c922;
animation: spin 1.5s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="app">
<div id="spin"></div>
<div id="maincontainer">
I have some contents here
</div>
</div>

How can I reverse this animation smoothly on mouseout?

I have this flipcard I put together, and when you hover over it, it flips 180 degrees on it's x-axis, and then expands. When I mouse-off of the element, I would like for this element to flip back the opposite way smoothly, the way it came in. Instead of the sudden change back when you mouseout like it is right now.
Also, it should be noted that I would like the animation to use animation: forwards for as long as the mouse is hovering over the element. (ie. so long as the user is hovering over the element, it should remain flipped, and enlarged.)
Is there any way to do this using just CSS? Or will I need Javascript? If so, I'd like to do this with pure Vanilla JS.
I have been poking around for solutions on Stack Overflow, and can't seem to find a definitive answer, or am not typing in the correct question.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>

You'd better use transition between normal and hover states.
Note that you have to track hover on .container to avoid jumping and flickering.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
}
.container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>

The reason this happens is because on the default non-hover state there's no animation state to return to. You have two options for this.
Don't use animations and just transition the effect on hover.
This way on out the properties will return to their non-hover state with transition.
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: all 0.3s ease;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
https://jsfiddle.net/255mnwxr/5/
To have a out animation property.
This is least desired because on load the animation will play once for it to animate then it acts naturally afterwards.
.flipcard {
animation: return 1s forwards;
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all 0.3s ease;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes return {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
https://jsfiddle.net/255mnwxr/2/

You need to add #keyframes on the mouse in and out hover.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to {-webkit-transform: rotateY(180deg) scale(2);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotateY(180deg) scale(2); }
100% { -webkit-transform: rotate(0deg); }
}
.flipcard:hover {
animation: out 1s forwards;
}
.flipcard {
animation: in 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>

You don't need a keyframe animation for this, you could just use basic CSS transitions for this, they'll rewind on mouseout with the transition property:
.flipcard {
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
However, if you do want to use animations (for more complex interactions) I have a snippet for that at the bottom, just know this can be a little harder to maintain, and just reversing it on the default element won't work.
Also note that you may want a mouse-container that doesn't rotate but controls the hover state otherwise the mouse may fall off part way through the transition, like:
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes shrink {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
animation: shrink 1s forwards;
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>

Make another div scroll too another div

Just need a scrolling set of divs, almost like a slide show! yet to find a solution, need a way to make the commented-out div be scroll-able by clicking somewhere on the page or and arrow image? is this possible without a page reload every "slide"? want it to slide into transition on click and able to go back "home"
HTML:
<div id="wrapper_home">
<div id="tey_home">
<div id="tey_button">
<img src="images/tey_logo-01.png" width="239" height="239" alt="tey_logo" />
</div>
</div>
<!--
<div id="afiw_home">
<div id="home_button"> <img src="images/home.png" width="52" height="52" alt="home" class="withfadeout"/> </div>
<div id="afiw_button">
<img src="images/afiw_logo-01.png" width="460" height="142" class="withfadein2"/>
</div>-->
</div>
</div>
CSS:
.withfadein{
opacity: 0;
-webkit-animation: load 20s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadein2{
opacity: 0;
-webkit-animation: load 10s linear forwards;
}
#-webkit-keyframes load{
from{opacity: 0;}
to{opacity: 1;}
}
.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
#wrapper_index {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
background-image: url(images/entry_image-01.png);
background-repeat: no-repeat;
position: relative;
}
#enter_button {
width: 140px;
position: absolute;
left: 434px;
top: 501px;
}
#wrapper_home {
height: 686px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
position: relative;
}
#afiw_home {
background-image: url(images/afiw.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#afiw_button {
height: 142px;
width: 460px;
position: absolute;
left: 276px;
top: 275px;
}
#home_button {
height: 52px;
width: 52px;
padding-top: 50px;
padding-left: 50px;
}
#tey_home {
background-image: url(images/tey-01.png);
background-repeat: no-repeat;
height: 686px;
width: 1024px;
position: relative;
}
#tey_home #tey_button {
position: absolute;
height: 239px;
width: 239px;
left: 399px;
top: 222px;
}
thank you so much for any help

You should use jquery:
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
This catch a 'click' event, but you can change it as you wish

use the .animate in jquery
var target = $("Target Div")
$("Div to fly").animate({'top': target.offset().top,
'left':target.offset().left}, 1000);

Positioning JS animated DIVs

I'm trying to make 3DIVs to move with JS and place them on the right side of the page, I've done the animate script, however the position isn't right. On mobile phones it goes above my other divs in #header section and it's to much to the left. And on PC:s it is to far from the left.
Is there any way to keep my animation this way but to make it inside of the wrapper? So that It doesn't change it's position on mobile phones and PC:s?
HTML:
<div class="wrapper">
<div id="intro-right">
<div id="clouds-1"></div>
<div id="clouds-2"></div>
<div id="clouds-3"></div>
</div>
</div>
CSS:
div.wrapper {
margin: 0 auto;
padding: 0 20px;
min-width: 1024px;
width: 1024px;
}
div#intro-right {
float: right;
}
div#clouds-1 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 100px;
right: 150px;
background: url("img/clouds_bg_1.png") no-repeat;
opacity: 0;
}
div#clouds-2 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 110px;
right: 150px;
background: url("img/clouds_bg_2.png") no-repeat;
opacity: 0;
}
div#clouds-3 {
position: absolute;
width: 420px;
height: 260px;
margin-top: 130px;
right: 150px;
background: url("img/clouds_bg_3.png") no-repeat;
opacity: 0;
}
JS:
$(document).ready(function() {
$("div#clouds-1").animate({
opacity:'0.4'
}, 1450);
$("div#clouds-2").animate({
opacity:'0.6'
}, 1450);
$("div#clouds-3").animate({
opacity:'0.8'
}, 1450);
});
$(document).ready(function() {
function moveRight1() {
$("div#clouds-1").animate({
top:'-=24px',
right: '+=50px',
opacity: '0.9'
}, 8000, moveLeft1);
}
function moveLeft1() {
$("div#clouds-1").animate({
top:'+=24px',
right: '-=50px',
opacity: '0.4'
}, 8000, moveRight1);
}
moveRight1();
function moveRight2() {
$("div#clouds-2").animate({
top:'-=24px',
right:'-=50px',
opacity: '0.9'
}, 8000, moveLeft2);
}
function moveLeft2() {
$("div#clouds-2").animate({
top:'+=24px',
right:'+=50px',
opacity: '0.6'
}, 8000, moveRight2);
}
moveRight2();
function moveRight3() {
$("div#clouds-3").animate({
top:'+=24px',
right:'+=100px',
opacity: '0.4'
}, 8000, moveLeft3);
}
function moveLeft3() {
$("div#clouds-3").animate({
top:'-=24px',
right:'-=100px',
opacity: '0.8'
}, 8000, moveRight3);
}
moveRight3();
});

Like pixelcdv said, CSS3 animations would be perfect for simple movement like this.
Here's a quick animation I came up using your code (all in percent)
The CSS for it based off of your html:
div#clouds-1 {
position: absolute;
width: 30%;
height: 20%;
top: 15%;
left: 35%;
background: url(http://www.drawingcoach.com/image-files/cartoon_clouds_2.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudOne 16s infinite;
-moz-transition: cloudOne 16s infinite;
-o-transition: cloudOne 16s infinite;
transition: cloudOne 16s infinite;
animation: cloudOne 16s infinite;
}
#keyframes cloudOne {
0% {
top:15%;
left: 35%;
}
50% {
top:7%;
left: 20%;
}
100% {
top:15%;
left: 35%;
}
}
div#clouds-2 {
position: absolute;
width: 30%;
height: 20%;
top:20%;
left: 45%;
background: url(http://asnika.info/wp-content/uploads/2013/04/drawing-of-cloudscartoon-clouds-drawing-techniques-fauprla4.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudTwo 16s infinite;
-moz-transition: cloudTwo 16s infinite;
-o-transition: cloudTwo 16s infinite;
transition: cloudTwo 16s infinite;
animation: cloudTwo 16s infinite;
}
#keyframes cloudTwo {
0% {
top:20%;
left: 45%;
}
50% {
top:35%;
left: 15%;
}
100% {
top:20%;
left: 45%;
}
}
div#clouds-3 {
position: absolute;
width: 30%;
height: 20%;
top:30%;
left: 50%;
background: url(http://www.how-to-draw-cartoons-online.com/image-files/cartoon_clouds.gif) no-repeat;
opacity: .9;
-webkit-transition: cloudThree 16s infinite;
-moz-transition: cloudThree 16s infinite;
-o-transition: cloudThree 16s infinite;
transition: cloudThree 16s infinite;
animation: cloudThree 16s infinite;
}
#keyframes cloudThree {
0% {
top:30%;
left: 50%;
}
50% {
top:5%;
left: 65%;
}
100% {
top:30%;
left: 50%;
}
}

I think in your case it would be better to use CSS3 animations. This way, you just have to call $('div#clouds-1').addClass(<new class that sets the position on the right>) instead of .animate() and adapt the css to work both on mobile and on desktop

Categories