I just want to animate specific element when route page load complete. its not route page transition. i have tried many ways. its a progress bar animate percentage of dynamicly from data value. i have tried mount destroyed method for change class but its not working.
my requirement is i want to pass value from data and according to the value, the progress bar shour be animate when page load.
enter image description here
<div class="media-body">
<div class="progress">
<div class="progress-bar progress-bar-warning" v-bind:class="{rating: isAnimate}">
</div>
</div>
</div>
.mybar {
height: 5px;
overflow: hidden;
background-color: #C1C2C1;
box-shadow: none;
}
.myactivebar {
background-color: #B01058;
float: left;
box-shadow: none;
transition: width 1s ease;
height: 100%;
width: 40%;
}
.rating {
width:100%;
}
data() {
return {
isAnimate: false,
technologies:[
{
title:'Vue Js',
info:'progressive framework for building user interfaces.',
logo:'https://vuejs.org/images/logo.png',
rate:90
},
]
}
}
This is actually what I want.
enter image description here
and I got the solution below
#-moz-keyframes animate-bar {
0% { width: 0%; }
}
#-webkit-keyframes animate-bar {
0% { width: 0%; }
}
#-ms-keyframes animate-bar {
0% { width: 0%; }
}
#-o-keyframes animate-bar {
0% { width: 0%; }
}
#-keyframes animate-bar {
0% { width: 0%; }
}
.chart {
background-color: #DADADA;
height: 2px;
position: relative;
}
.chart .bar {
background-color: #3D98C6;
height: 100%;
-moz-animation: animate-bar 1.25s 1 linear;
-webkit-animation: animate-bar 1.25s 1 linear;
-ms-animation: animate-bar 1.25s 1 linear;
-o-animation: animate-bar 1.25s 1 linear;
animation: animate-bar 1.25s 1 linear;
}
<div class="chart">
<div class="bar" style="width:60%;"></div>
</div>
Related
I have a code that triggers an animation on some elements when they're hovered by adding a second css class on them, and once it's done, this class is removed so it becomes static again. I don't know how to make the animation happen every time the page is loaded tho, I tried adding a "window.load" function but it didn't work out. I'd appreciate if someone could shed me a light on it.
Here's the snippet: https://jsfiddle.net/6fmno8vb/1/
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
Thanks!
I will give two solutions.
Wrap event mouseenter with a window load event.
$(window).on('load', function() {
...
$(".main-logo").trigger("mouseenter");
});
$(window).on("load", function () {
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").trigger("mouseenter");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
If you trigger a mouse event immediately after the page is launched, then it does not always look efficient. I advise you to wrap the event mouseenter call in setTimeout(), specifying any appropriate value for the delay.
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
setTimeout(function () {
$(".main-logo").trigger("mouseenter");
}, 1000);
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
Dear according to your question you want the animation to be loaded on page load, so I have added document. ready function and also your old function is also there, so both functionalities on hover and on page is load is available
$(".draw, .draw2, .logo-box").on("animationend webkitAnimationEnd", function () {
$(this).addClass("done");
if (!$(".draw:not(.done), .draw2:not(.done), .logo-box:not(.done)").length) {
$(".draw.done, .draw2.done, .logo-box").removeClass("anim").removeClass("done");
}
});
$(document).ready(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
$(".main-logo").mouseenter(function () {
$(".draw, .draw2, .logo-box").addClass("anim");
});
body {
width: 100%;
background: #fff;
}
.main-logo {
float: left;
margin: 0 30%;
display: block;
}
.logo-box {
background: #000;
width: 200px;
height: 200px;
float: left;
transition: all 0.25s ease;
transform: scale(1);
}
.logo-box.anim {
transform: scale(1.07) translate(-3px, 3px);
transition: all 0.15s cubic-bezier(1, 0, 0, 1);
}
.draw {
background: #d7cf00;
width: 50px;
height: 50px;
}
.draw.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
.draw2 {
background: #db0a28;
width: 50px;
height: 50px;
}
.draw2.anim {
animation: animate 1.5s ease-in;
animation-fill-mode: forwards;
}
#keyframes animate {
0% {
transform: scale(0.5);
}
20% {
transform: scale(0.3);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main-logo">
<div class="logo-box">
<div class="draw"></div>
<div class="draw2"></div>
</div>
</div>
</body>
I'm creating an animation effect (decreasing the height slowly) as part of a keyframes animation. The animation plays forwards once, but doesn't play backwards and doesn't play on subsequent times.
JSFiddle here - http://jsfiddle.net/shaaraddalvi/eLwcw22e/
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation 1s backwards;
-moz-animation: someanimation 1s backwards;
-ms-animation: someanimation 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
Scroll through the page to get the desired effect. (Tested currently on chrome, isn't working that well on Edge).
You can achieve this by adding another keyframe animation like this:
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#-webkit-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-moz-keyframes someanimation {
from { padding: 100px 0px; }
to { padding: 10px 0px; }
}
#-ms-keyframes someanimation {
from: { padding: 100px 0px; }
to: { padding: 10px 0px; }
}
#-webkit-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-moz-keyframes someanimation2 {
from { padding: 10px 0px; }
to { padding: 100px 0px; }
}
#-ms-keyframes someanimation2 {
from: { padding: 10px 0px; }
to: { padding: 100px 0px; }
}
#banner-container {
padding: 100px 0px;
background-color: orange;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
-webkit-animation: someanimation 1s forwards;
-moz-animation: someanimation 1s forwards;
-ms-animation: someanimation 1s forwards;
}
#banner-container.dynamic {
-webkit-animation: someanimation2 1s backwards;
-moz-animation: someanimation2 1s backwards;
-ms-animation: someanimation2 1s backwards;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#-webkit-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-moz-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#-ms-keyframes bufferAnimation {
from { padding-top: 268px; }
to { padding-top: 88px; }
}
#banner-container.static + #buffer {
-webkit-animation: bufferAnimation 1s forwards;
-moz-animation: bufferAnimation 1s forwards;
-ms-animation: bufferAnimation 1s forwards;
}
#banner-container.dynamic + #buffer {
-webkit-animation: bufferAnimation 1s backwards;
-moz-animation: bufferAnimation 1s backwards;
-ms-animation: bufferAnimation 1s backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
You can also check this Fiddle
You can achieve this without using animation. Hope this is the effect you want.
var scrollEventHandler = function() {
if(window.scrollY > 210) {
document.getElementById("banner-container").classList.remove("dynamic");
document.getElementById("banner-container").classList.add("static");
}
else {
if (document.getElementById("banner-container").classList.contains("static")) {
document.getElementById("banner-container").classList.remove("static");
document.getElementById("banner-container").classList.add("dynamic");
}
}
}
$(document).scroll(scrollEventHandler);
#header {
height: 200px;
padding: 5px;
background-color: purple;
color: white;
}
#banner-container {
padding: 100px 0;
background-color: orange;
}
#banner-container {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
}
#banner-container.static {
position: fixed;
top: 0;
width: 100%;
padding: 20px 0;
}
#banner-container.dynamic {
padding: 100px 0;
}
#banner {
width: 500px;
margin: 0 auto;
}
#buffer {
background-color: green;
padding: 50px;
height:5000px;
}
#banner-container.static + #buffer {
padding-top: 268px;
}
#banner-container.dynamic + #buffer {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-ms-transition: all .6s;
-o-transition: all .6s;
transition: all .6s;
padding-top: 88px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
This is header
</div>
<div id="banner-container">
<div id="banner">
Banner text
</div>
</div>
<div id="buffer">
Buffer text 1<br/>
Buffer text 2<br/>
Buffer text 3<br/>
Buffer text 4<br/>
Buffer text 5<br/>
Buffer text 6<br/>
Buffer text 7<br/>
Buffer text 8<br/>
Buffer text 9<br/>
Buffer text 10<br/>
Buffer text 11<br/>
Buffer text 12<br/>
Buffer text 13<br/>
Buffer text 14<br/>
Buffer text 15<br/>
Buffer text 16<br/>
Buffer text 17<br/>
</div>
I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?
Please check the code in this jsfiddle.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
css:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
#keyframes loadbar {
0% {width: 0%;left:0;right:0}
}
I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration
I made the bars semi-opaque to show when the animations fire.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
position: relative;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: red;
z-index: 1;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
z-index: 2;
}
.progress-bar-outer div {
position: absolute;
top: 0; bottom: 0;
transform: translateX(-100%);
animation: loadbar 3s linear;
-webkit-animation: loadbar 3s linear;
opacity: 1;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
100% {
transform: translateX(0);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.
.progress-bar-inner {
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
-webkit-animation: loadbar 2s ease 2s forwards;
animation: loadbar 2s ease 2s forwards
animation-delay: 2s;
-webkit-animation-delay: 2s;
opacity:0;
}
#keyframes loadbar {
0% { width: 0%;left:0;right:0}
1% { opacity: 1}
100% { opacity: 1}
}
See working example:
https://jsfiddle.net/dfkLexuv/10/
I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq
You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.
You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");
I have the following HTML code. I have applied some animations to the logo using CSS3 and it's working as I wanted. Now the animation works when we hover on the logo. I want the animation to work automatically when the page loads.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo"> <img src="logo.jpg" alt="logo" /> </div>
<!--logo-->
</div>
<!--content-->
</div>
<!--container-->
</body>
</html>
There are multiple ways how you can achieve this:
The first one is to add a class to the logo after pageload with JavaScript. You need to do this, because CSS transitions only react on changes like classlist changes, hover etc., but can not start by itself.
The second way is to use CSS keyframe animations, which I believe is more what you want. You can learn about it here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
#-webkit-keyframes anm {
0% {-webkit-transform: rotate(0deg);}
25% {-webkit-transform: rotate(180deg);}
50% {-webkit-transform: rotate(360deg);}
75% {-webkit-transform: rotate(540deg);}
100% {-webkit-transform: rotate(720deg);}
}
#keyframes anm {
0% {transform: rotate(0deg);}
25% {transform: rotate(180deg);}
50% {transform: rotate(360deg);}
75% {transform: rotate(540deg);}
100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
It won't unless you use #keyframes CSS animations. you can use like mentioned below..
and use animation-rotate class in your img tag. Here is the Demo.
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
-moz-animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#-moz-keyframes coinflip {
0% {
-moz-transform:rotateY(-1deg);
}
100% {
-moz-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}