I'm trying to trigger a CSS animation onclick, but have it restart after each click. I know I can toggle the animation on and off, but I'd like to just trigger the animation every time the button is clicked. Also, initially the CSS animation should not run. Only run when clicked.
Here's my pen.
http://codepen.io/omarel/pen/JRwpZp
HTML :
click me
Jquery :
$('.addtocart').click(function () {
$(this).addClass('on');
});
CSS :
.addtocart {
position: relative;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform: translateY(-100%);
}
10% {
transform: translateY(-100%);
}
15% {
transform: translateY(0);
}
30% {
transform: translateY(-50%);
}
40% {
transform: translateY(0%);
}
100% {
opacity: 1;
}
}
You can listen to when the animation ends, then remove the class 'on'
var animationEvent = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one(animationEvent, function(event) {
$(this).removeClass('on')
});
});
$('.addtocart').click(function () {
$(this).addClass('on');
$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$(this).removeClass('on')
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me
Instead of using an on click event, use :focus.
.addtocart:focus {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
Now, whenever an element with the .addtocart class is focused (or clicked on), it will have those styles. When you click away, the styles will go away.
You could use the .delay() and .queue()/dequeue() if you want to add/remove class :
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
Hope this helps.
$('.addtocart').click(function () {
$(this).addClass('on').delay(500).queue(function(){
$(this).removeClass('on').dequeue();
});
});
.addtocart {
position:relative;
width:100px;
display:block;
background-color:#000;
color:#fff;
padding:10px;
text-align:center;
}
.addtocart.on {
-webkit-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-moz-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-ms-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
-o-animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
animation: cartbtnFade 0.6s 0.1s 1 linear alternate;
}
#keyframes cartbtnFade {
0% {
opacity: 0;
transform:translateY(-100%);
}
10% {
transform:translateY(-100%);
}
15% {
transform:translateY(0);
}
30% {
transform:translateY(-50%);
}
40% {
transform:translateY(0%);
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me
You can add and remove the css class on every click and inorder for you to run the css only while clicking, do this onload not on ready
Example
.addClass and .removeClass
I have a solution to remove your on class every second:
var $post = $(".addtocart");
setInterval(function() {
$post.removeClass("on");
}, 1000);
http://codepen.io/anon/pen/NRZykG
As Jacob said there is no need for javascript.
You can use CSS :focus or :target as in this codepen https://codepen.io/sebilasse/pen/rrOYQj?editors=1100
-
.root {
appearance: none;
position: relative;
width: 120px;
height: 50px;
transition: all .1s linear;
transform: translate3d(0, 0, 0);
}
.animation {
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
outline: none;
}
#keyframes pulse {
0% { opacity: 0; box-shadow: 0 0 0 1px red; }
40% { opacity: 0.8; }
80% { box-shadow: 0 0 0 80px red; }
99% { opacity: 0; box-shadow: 0 0 0 0px red; }
}
.root:hover ._focus:focus::after,
.root:target ._target::after {
content: "";
display: block;
position: absolute;
width: 4px;
height: 4px;
box-shadow: 0 0 0 0px red;
border-radius: 50%;
z-index: 1;
left: 20px;
top: 25px;
transform: perspective(1px) translate(-50%, -50%);
animation-name: pulse;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
<h3>crossbrowser animation onClick hacks</h3>
<button class="root">
<div class="animation _focus" tabindex="0" onanimationend="this.blur()">
</div>
contra: steals focus
</button>
<button id="btn_1" class="root">
<a class="animation _target" href="#btn_1"></a>
contra: needs id
</button>
Related
I'm trying to solve this problem, but I'm giving up and I'm here to see if you can give me some hints.
I made this bubble effect in which when I touch each bubble it pops, but I can't get the bubbles to reappear after a few seconds (as if they were new bubbles).
I leave the code here below:
function changeStyle1() {
var element = document.getElementById("pop1");
element.style.opacity = "0";
}
function changeStyle2() {
var element = document.getElementById("pop2");
element.style.opacity = "0";
}
function changeStyle3() {
var element = document.getElementById("pop3");
element.style.opacity = "0";
}
function changeStyle4() {
var element = document.getElementById("pop4");
element.style.opacity = "0";
}
function changeStyle5() {
var element = document.getElementById("pop5");
element.style.opacity = "0";
}
function changeStyle6() {
var element = document.getElementById("pop6");
element.style.opacity = "0";
}
function changeStyle7() {
var element = document.getElementById("pop7");
element.style.opacity = "0";
}
function changeStyle8() {
var element = document.getElementById("pop8");
element.style.opacity = "0";
}
function changeStyle9() {
var element = document.getElementById("pop9");
element.style.opacity = "0";
}
function changeStyle10() {
var element = document.getElementById("pop10");
element.style.opacity = "0";
}
function changeStyle11() {
var element = document.getElementById("pop11");
element.style.opacity = "0";
}
body {
background: #000;
color: #333;
font: 100% Lato, Arial, Sans Serif;
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* OBJECTS */
button {
background: transparent;
border-color: transparent;
}
.bubble {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
}
.bubble:after {
content: '';
position: absolute;
top: 80px;
left: 80px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble::before {
content: '';
position: absolute;
top: 50px;
left: 45px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
z-index: 10;
filter: blur(2px);
}
.bubble span {
position: absolute;
border-radius: 50%;
}
.bubble span:nth-child(1) {
inset: 10px;
border-left: 15px solid #0fb4ff;
filter: blur(8px);
}
.bubble span:nth-child(2) {
inset: 10px;
border-right: 15px solid #ff4484;
filter: blur(8px);
}
.bubble span:nth-child(3) {
inset: 20px;
border-top: 15px solid #ffeb3b;
filter: blur(8px);
}
.bubble span:nth-child(4) {
inset: 30px;
border-left: 15px solid #ff4484;
filter: blur(12px);
}
.bubble span:nth-child(5) {
inset: 10px;
border-bottom: 10px solid #fff;
filter: blur(8px);
transform: rotate (330deg);
}
/* ANIMATIONS */
.x1 {
-webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: -5%;
top: 5%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x2 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 5%;
top: 80%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x3 {
-webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 10%;
top: 40%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
.x4 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 20%;
top: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x5 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 30%;
top: 50%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
}
.x6 {
-webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 50%;
top: 0;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
.x7 {
-webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 65%;
top: 70%;
-webkit-transform: scale(0.4);
-moz-transform: scale(0.4);
transform: scale(0.4);
}
.x8 {
-webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 80%;
top: 10%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x9 {
-webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
left: 90%;
top: 50%;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
}
.x10 {
-webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
left: 80%;
top: 80%;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
}
.x11 {
-webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
-moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
left: 90%;
top: 90%;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
transform: scale(0.7);
}
/* KEYFRAMES */
#-webkit-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-moz-keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#keyframes animateBubble {
0% {
margin-top: 1000px;
}
100% {
margin-top: -100%;
}
}
#-webkit-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#-moz-keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
#keyframes sideWays {
0% {
margin-left: 0px;
}
100% {
margin-left: 50px;
}
}
<head>
<title>Pure CSS Animated Bubbles</title>
</head>
<body>
<button type="button" onclick="changeStyle()">Click Me</button>
<div id="background-wrap">
<button id="pop1" onclick="changeStyle1()" class="bubble x1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop2" onclick="changeStyle2()" class="bubble x2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop3" onclick="changeStyle3()" class="bubble x3">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop4" onclick="changeStyle4()" class="bubble x4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop5" onclick="changeStyle5()" class="bubble x5">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop6" onclick="changeStyle6()" class="bubble x6">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop7" onclick="changeStyle7()" class="bubble x7">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop8" onclick="changeStyle8()" class="bubble x8">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop9" onclick="changeStyle9()" class="bubble x9">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop10" onclick="changeStyle10()" class="bubble x10">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<button id="pop11" onclick="changeStyle11()" class="bubble x11">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
</body>
Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG
You dont need all of those functions,just one will be enough
JS
const changeStyleToBubble = (id) => {
//we get the id directly from the html element,as parameter
const element = document.getElementById(id);
element.style.opacity = "0";
//set it back to 1 after 2 seconds (2000 ms)
setTimeout(() => {
element.style.opacity = "1";
}, 2000)
}
HTML
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">
My page loads directly which is very fast, I basically want to load my page after some transition-duration. Once the transition fades away, the webpage should slowly load/appear.
I've been trying to figure this out for a long time but I don't know how to add a transition effect in Javascript.
<script>
var overlay = document.getElementById("loading");
window.addEventListener('load',function()
{
overlay.style.display = 'none';
})
</script>
follwoing is css file
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
}
.loading-text {
position: absolute;
top: 40%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
width: 100%;
height: auto;
line-height: 100px;
}
.loading-text span {
display: inline-block;
margin: 0 5px;
color: #000;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
}
.loading-text span:nth-child(1) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0s infinite linear alternate;
animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1s infinite linear alternate;
animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
animation: blur-text 1.5s 1.2s infinite linear alternate;
}
#-webkit-keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
#keyframes blur-text {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
filter: blur(4px);
}
}
following is html
<div id="loading">
<div class="loading-text">
<span class="loading-text-words">L</span>
<span class="loading-text-words">O</span>
<span class="loading-text-words">A</span>
<span class="loading-text-words">D</span>
<span class="loading-text-words">I</span>
<span class="loading-text-words">N</span>
<span class="loading-text-words">G</span>
</div></div>
You can hide the content at the beginning and show the loading stage with something like this:
#loading {
display: block;
}
.content {
display: none;
}
Then you could set the timeout of how much of the time you want to see the loading phase, then fade out the loader and fade in the content.
setTimeout(function(){
$("#loading").fadeOut();
$(".content").fadeIn();
}, 3000);
I want to add text to the images that are fading in and fading out. And I want the text to fade in and out with the concerned image. Any Idea how can this be done? Thanks in advance! I have given the code below:
<html>
<div id="fadeslide">
<img src="9.jpg" class="is-showing"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
</div>
</html>
<script>
function slideShow() {
var showing = $('#fadeslide .is-showing');
var next = showing.next().length ? showing.next():
showing.parent().children(':first');
showing.fadeOut(1000, function() {
next.fadeIn(1000).addClass('is-showing');
}).removeClass('is-showing');
setTimeout(slideShow, 5500);
}
$(document).ready(function() {
slideShow();
});
</script>
#fadeslide {
width: 960px;
height: 640px;
margin: 0px auto 0px auto;
overflow: hidden;
}
#fadeslide img {
display: none;
}
#fadeslide .is-showing {
display: inline;
}
Try this:-
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div id="cf">
<img class="bottom" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />
<img class="top" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" />
</div>
Ok try it
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.letter {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
#-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
#keyframes fade {
50% {
opacity: 0.02;
}
}
<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>
or this
.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
.fadebutton:hover {
background-image:url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}
<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>
How would I go about adding something to minimize this box I have and also maximise it once its been minimized?
Heres the code to display the box
<header class="info">
<hgroup class="about">
<h1><span class="online_users"> <span id="reload_users" class="reload_users"></span> Online</span> | <span class="room_loaded"> <span id="reload_rooms" class="reload_rooms"></span> Rooms</span></h1>
</hgroup>
<nav class="more">
Buy VIP
</nav>
</header>
and heres the css for it
<style type="text/css">
#-webkit-keyframes show-info {
0% { -webkit-transform: rotateY(120deg); }
100% { -webkit-transform: rotateY(0deg); }
}
#-moz-keyframes show-info {
0% { -moz-transform: rotateY(120deg); }
100% { -moz-transform: rotateY(0deg); }
}
#-ms-keyframes show-info {
0% { -ms-transform: rotateY(120deg); }
100% { -ms-transform: rotateY(0deg); }
}
#-o-keyframes show-info {
0% { -o-transform: rotateY(120deg); }
100% { -o-transform: rotateY(0deg); }
}
#keyframes show-info {
0% { transform: rotateY(120deg); }
100% { transform: rotateY(0deg); }
}
.info {
-webkit-transition: all 180ms ease-out;
-moz-transition: all 180ms ease-out;
-ms-transition: all 180ms ease-out;
-o-transition: all 180ms ease-out;
transition: all 180ms ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(800);
-moz-transform: perspective(800);
-ms-transform: perspective(800);
-o-transform: perspective(800);
transform: perspective(800);
font-family: 'Quantico', sans-serif;
position: absolute;
font-size: 12px;
opacity: 0.65;
color: #fff;
z-index:9999;
width: 240px;
right: 210px;
top: 0px;
border: #333 solid 1px;
border-radius: 5px;
}
.info:hover {
box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
opacity: 1.0;
}
.info h1,
.info h2,
.info h3 {
line-height: 1;
margin: 5px 0;
}
.info .about,
.info .more {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: rotateY(120deg);
-moz-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
-o-transform: rotateY(120deg);
transform: rotateY(120deg);
margin-bottom: 1px;
background: rgba(0,0,0,0.95);
padding: 12px 15px 12px 20px;
}
.info .about {
-webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
-o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards;
padding-bottom: 15px;
}
.info .about h1 {
letter-spacing: -1px;
font-weight: 300;
font-size: 19px;
opacity: 0.95;
}
.info .about h2 {
font-weight: 300;
font-size: 13px;
opacity: 0.8;
}
.info .about h3 {
text-transform: uppercase;
margin-top: 10px;
font-size: 11px;
}
.info .about h3:after {
margin-left: 4px;
font-size: 14px;
content: '\203A';
}
.info .more {
-webkit-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-moz-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-ms-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
-o-animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards;
padding: 5px 15px 10px 20px;
}
.info .more a {
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
border-bottom: 1px dotted rgba(255,255,255,0.4);
text-transform: uppercase;
text-decoration: none;
margin-right: 10px;
font-size: 10px;
opacity: 0.6;
color: #fff;
}
.info .more a:hover {
opacity: 0.99;
}
</style>
would anyone be kind enough as to help me achieve what I am trying to do?
It would be greatly appreciated!
I have not read your styles, base on description:
You can make 2 classes, called -MIN and -MAX
Consider you have wrapped all boxes to a div with MAX style:
then you may have something like this:
<div class='my-prefix-MAX'>
...
<button onload = "resize()">Minimaze<button>
...
<div>
JS:
function resize(){
if(this.parrentNode.className.indexOf('MIN')>-1){
this.parrentNode.className.replace('MIN','MAX');
this.value = 'Maximize'
}else{
this.parrentNode.className.replace('MAX','MIN');
this.value = 'Maximize'
}
}
I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.
It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle
CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}