I have a div inside which moves another div. I need to stop .block at the current position when I hover on .container. How to do it?
HTML:
<div class="container">
<div class="block"></div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
position: relative;
}
.block {
width: 100px;
height: 100px;
background: red;
position: absolute;
animation: move 2s linear infinite;
}
#keyframes move {
0% { left: 10px; }
25% { left: 50px; }
50% { left: 100px; }
75% { left: 50px; }
100% { left: 10px; }
}
DEMO
You can add
.block:hover
{
animation-play-state: paused;
}
to pause the animation when you hover over it.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
You can pause animation when hover on .container. Consider following css:
.container:hover .block{
animation-play-state: paused;
}
DEMO
CSS:
.container:hover > .block {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
JS:
var node = document.getElementsByClassName("block")[0];
node.addEventListener('mouseenter', function(evt) {
evt.currentTarget.style.webkitAnimationPlayState = 'paused';
});
node.addEventListener('mouseleave', function(evt) {
evt.target.style.webkitAnimationPlayState = 'running';
});
Related
I want to create slide effect on my div but slideOut animation not executing.
var a = document.getElementById('box1');
function slide(){
if(a.className == 'newBox'){
a.style.animationName = 'slideOut';
//console.log(a.style.animationName);
} else {
a.setAttribute('class','newBox');
}
}
.box, .newBox {
width: 300px;
height: 200px;
text-align: center;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.newBox:after {
content: "";
position: absolute;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
width: 100%;
height: 100%;
animation-name: slideIn;
animation-duration: 1s;
animation-iteration-count: 1;
}
#keyframes slideIn {
0% {
transform: translate(100%,0);
}
100% {
transform: translate(0,0);
}
}
#keyframes slideOut {
0% {
transform: translate(0%,0);
}
100% {
transform: translate(100%,0);
}
}
<div id="box1" class="box" onmouseover="slide()" onmouseleave="slide()"></div>
There's no need for JS / jQuery or animation while you can do it with transition:
.box {
width: 300px;
height: 200px;
text-align: center;
border: 1px solid black;
position: relative;
overflow: hidden;
}
.box:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
transition: 1s;
background-color: rgba(0,0,0,0.1);
}
.box:hover:after {
width: 100%;
}
<div id="box1" class="box"></div>
you are not defining the 100% case in the css slideOut properties
here:
#keyframes slideOut {
0% {
transform : translate(0%,0) ;
}
I have created a preloader which works fine apart from when it is gone it is still there as a invisible layer covering all the content on the page. So none of the content like links can be clicked. How can this be solved but still keep the animation?
Codepen
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
</div>
<div class="section" id="left_sect">
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #666666;
width: 100%;
}
#preloader_wrap{
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section{
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect{
left: 0;
}
#right_sect{
right: 0;
}
#content{
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar{
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div{
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
body.loaded .section{
width: 0;
}
body.loaded #content{
opacity: 0;
}
header{
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul{
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li{
display: inline-block;
font-size: 40px;
}
ul li a{
color: white;
}
JS:
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 2000);
});
Change your script to this...
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('#preloader_wrap').remove();
}, 2000);
});
That will completely remove the layer once the page is loaded.
Its basically a z-index problem on preloader_wrap. You can fix the z-index after the loader is loaded with $("#preloader_wrap").css("z-index","-1")
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
$("#preloader_wrap").css("z-index", "-1");
}, 2000);
});
* {
margin: 0;
padding: 0;
}
body {
background-color: #666666;
width: 100%;
}
#preloader_wrap {
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section {
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect {
left: 0;
}
#right_sect {
right: 0;
}
#content {
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img {
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar {
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div {
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body.loaded .section {
width: 0;
}
body.loaded #content {
opacity: 0;
}
header {
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul {
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li {
display: inline-block;
font-size: 40px;
}
ul li a {
color: white;
}
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
sdsadsadsa
</div>
<div class="section" id="left_sect">
dasdsadsad
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Your loader area has a z-index of 1010, which puts it in front of everything else, and you aren't removing that, or removing the element itself. And because its width and height are 100% it blocks the whole page.
You can fix this just using CSS. You're already doing this:
body.loaded .section{
width:0;
}
body.loaded #content{
opacity: 0;
}
However, this only hides the inner parts of the loader, not the whole thing. Do this instead:
body.loaded #preloader_wrap {
display:none;
}
See working example: https://codepen.io/anon/pen/ZKbJEj
I'm not overly clear on which parts of your markup you are trying to hide, but assuming it's all of the stuff within the preloader_wrap element (and if not I would move that markup outside of it), the issue you are having is that this element is stacked on top of the other elements due to it's z-index being higher.
The easiest fix for this is to add the following CSS:
body.loaded #preloader_wrap {
display: none;
}
I can see that this breaks your animation, you could consider the following instead:
body.loaded #content{
opacity: 0;
display: none;
}
However this feels like a bit of a hack given we wouldn't be hiding the wrapper here therefore if anything else in it gave it height it would still overlay part of the page.
I would consider refactoring your markup/CSS transition to make this work for you in a more consistent way.
I have a div with a black background. When my page loads, I make a call for an image and then load that image into a div behind the main div. Then I want to smoothly fade the overlaying div to have an opacity so that the image underneath is displayed, but without impacting the opacity of content in the overlaying div.
What I have isn't really working at all: https://jsfiddle.net/n7t2xmha/3/
The animation is not smooth
The opacity is not accurate
The text does not stay solid
Code:
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.outerdiv-opaque {
opacity: 0.9 !important;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index=-1;
}
JS
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
}, 1000)
Separate the timeouts functions.
modify the .outerdiv-opaque class
.outerdiv-opaque {
background-color: white;
}
your timeOut functions after separating would look like this
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
I would use a pseudo, like this, which will keep your markup as is and as the opacity is on the pseudo it won't effect any other element.
Instead of a script, I used an extra step on the animation, where I told it to keep its opacity at 1 up until 60% of the animation time before it should start to fade.
.outerdiv {
position: relative;
height: 500px;
width: 500px;
color: white;
background: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv::before {
content: '';
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
animation: fade 2s linear;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
p {
position: relative;
}
#keyframes fade {
0% { opacity:1 }
60% { opacity:1 }
100% { opacity:0.5 }
}
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
There are literally a dozen ways to do this. Here are four basic examples which work smoothly.
Using CSS Transitions
HTML:
<div class="container">
<div class="outerdiv">
</div>
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv.fadeout{
opacity:0
}
.container p{
position:relative;
z-index:3;
}
JS:
// wait 1 second, add the fadeout class, let the CSS do the rest
setTimeout(function(){
document.querySelector('.outerdiv').classList.add('fadeout')
},1000);
See it in action: https://jsfiddle.net/kmm8e0x7/8/
Using CSS Animation
HTML: same as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv{
animation: fadeout .5s linear forwards 1s;
/*
Which is shorthand for:
animation-name: fadeout
animation-duration: .5s;
animation-timing-function: linear
animation-fill-mode:forwards;
animation-delay: 1s
*/
}
.container p{
position:relative;
z-index:3;
}
#keyframes fadeout{
from{opacity:1}
to{opacity:0}
}
JS: none (animation-delay property removes the need for setTimeout)
See it in action: https://jsfiddle.net/kmm8e0x7/7/
Using JavaScript
HTML: as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.container p{
position:relative;
z-index:3;
}
JS:
var el = document.querySelector('.outerdiv');
function fadeout(){
el.style.opacity -= 0.01;
if(el.style.opacity !== 0){
requestAnimationframe(fadeout);
// this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame
}
}
// just use setTimeout to wait for 1 second before starting the fadeout
setTimeout(fadeout,1000);
See it in action: https://jsfiddle.net/kmm8e0x7/6/
Using jQuery
HTML: same as above
CSS: same as above
JS:
$('.outerdiv').animate({
'opacity': '0'
}, 500);
See it in action: https://jsfiddle.net/kmm8e0x7/5/
Is there a way to make a div spin, aswell as its content, but make the content not go upside-down while rotating ?
What I mean is that the div-childs would follow the rotation of the mother-div spinning, but while remaining in the same direction (top on top, bottom on bottom).
My english isn't goog enough to articulate properly what I want to do, so here is an exemple :
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
In the exemple above, the child divs are following the rotation and the spin.
I would like them not to "spin upside-down" and just follow the rotation.
I've seen these type of animation in several websites but I can't recall where exactly.
Is there a way to do this in css/js/jquery/php... ?
You can apply the same animation to the four children, but in reverse. That way, the rotation of the children counteract the rotation of the parent and the children remain upright.
For clarity, I've used animation-direction to reverse the animation:
animation-direction: reverse;
But you could include the direction in your animation shorthand, like:
animation: spin 10s reverse infinite linear;
Here's an example:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
animation: spin 10s infinite linear;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
}
#div2 {
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>
Following #showdev answer, if you want the borders around the inner divs to follow the spin of the outer block and only make the text inside to stay "fixed" in position - you can use a bit of jQuery for that:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
I also added a bit of css, you can check inside the snippet:
$('.spin div').each(function() {
$(this).contents().wrap('<span></span>');
});
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
}
.spin div {
text-align: center;
line-height: 50px;
}
.spin div span {
animation: spin 10s infinite linear;
animation-direction:reverse;
display: inline-block;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover, .spin:hover span {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spin">
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<div id="div4">hello</div>
</div>
I understood you also wanted each of 4 elements to stay in the area of their corners. This might need some extra animation to have them run around the parent edges.
Below the idea of what i understood:
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
position: relative;
animation: spin 10s infinite linear;
}
.spin div {
width: 50px;
height: 50px;
}
#div1 {
border: 1px solid blue;
animation: spin1 10s infinite linear;
position: absolute;
top: 0;
left: 0;
}
#div2 {
animation: spin2 10s infinite linear;
border: 1px solid red;
position: absolute;
top: 0;
right: 0;
}
#div3 {
animation: spin3 10s infinite linear;
border: 1px solid black;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
animation: spin4 10s infinite linear;
border: 1px solid green;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover,
.spin:hover div {
animation-play-state: paused!important;/* or used id and several selectors to avoid the important and overide div#div1 {...}*/
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
25% {
top: 150px;
left: 0
}
50% {
left: 150px;
top: 150px
}
75% {
left: 150px;
top: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin2 {
0% {
transform: rotate(0deg);
}
25% {
top: 0;
right: 150px
}
50% {
right: 150px;
top: 150px
}
75% {
top: 150px;
right: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin3 {
0% {
transform: rotate(0deg);
}
25% {
bottom: 0;
left: 150px
}
50% {
left: 150px;
bottom: 150px
}
75% {
bottom: 150px;
left: 0;
}
100% {
transform: rotate(-359deg);
}
}
#keyframes spin4 {
0% {
transform: rotate(0deg);
}
25% {
right: 0;
bottom: 150px
}
50% {
right: 150px;
bottom: 150px
}
75% {
right: 150px;
bottom: 0;
}
100% {
transform: rotate(-359deg);
}
}
<div class="spin">
<div id="div1">top left</div>
<div id="div2">top right</div>
<div id="div3">bottom left</div>
<div id="div4">bottom right</div>
</div>
Add this rule to each numbered div:
counterspin 10s infinite linear;
and then this keyframes animation
#keyframes counterspin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div class="spin">
<div id="div1">hello
</div>
<div id="div2">hello
</div>
<div id="div3">hello
</div>
<div id="div4">hello
</div>
</div>
you may try this
.spin {
margin: 50px;
width: 200px;
height: 200px;
background: orange;
animation: spin 10s infinite linear;
position:relative;
}
.spin div {
margin:10px;
animation: spin 10s infinite ease-in-out;
animation-direction: reverse;
}
#div1 {
border: 1px solid blue;
width: 50px;
height: 50px;
position:absolute;
top:0;
left:0;
}
#div2 {
border: 1px solid red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
}
#div3 {
border: 1px solid black;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
#div4 {
border: 1px solid green;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.spin:hover {
animation-play-state: paused;
}
.spin:hover div {
animation-play-state: paused;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>