I've had a big problem trying to achieve this. I don't understand how to animate something so that it turns in a circle so I grabbed a working one from Circle Progress Bar and am trying to find a way to make it animate on button click using jquery. I tried using this tutorial but have no idea how to properly incorporate it. Please help. Here is my Fiddle though it doesn't come close to working.
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activatedAfter {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
}
.activated {
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
I changed $('#progress') to $('.progress') in your fiddle since 'progress' is a class and not an ID. Also, I replaced the activatedAfter style with the activated:after and activated:before styles from the example in the link you provided.
Also, I added the jQuery library in the code (it was not included in your fiddle)
Try this
$('#battleButton').click(function() {
$('.progress').addClass('activated activatedAfter');
});
body {
background-color: #000;
}
.progress {
width:200px;
height:200px;
background:#fff;
border:2px solid #000;
position:relative;
margin:50px;
border-radius:50%;
overflow:hidden;
transform: translateZ(0px);
display:inline-block;
}
.activated:after {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:-50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-moz-animation-delay:4s;
-webkit-animation-delay:4s;
transform-origin:100% 50%;
z-index:1;
}
.activated:before {
position:absolute;
content:"";
width:100%;
height:100%;
top:0;
left:50%;
background:tomato;
-moz-animation:turn 4s linear forwards;
-webkit-animation:turn 4s linear forwards;
-o-animation:turn 4s linear forwards;
-ms-animation:turn 4s linear forwards;
animation:turn 4s linear forwards;
transform-origin:0% 50%;
z-index:2;
}
#-moz-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-webkit-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-o-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#-ms-keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
#keyframes turn {
99.9% {
transform:rotate(180deg);
background:tomato;
}
100% {
background:#fff;
}
}
button {
background-color: rgba(0, 0, 0, 0);
border-color: #81ff14;
color: #81ff14;
border-radius: 10%;
float: right;
margin-right: 100px;
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>
<button id="battleButton">Battle</button>
Related
So I just started learning code and so I figured I would start with something simple and include a bunch of styling aspects and animations using keyframes. When one of my animations starts, I have the word 'hello' fading into view and then fading out of view. When the animation is done though, the word hello doesn't completely disappear, it pops into the top left corner of my screen and won't leave. Just curious if anyone knows how to get rid. Like I said, I just started learning so any simple steps would be appreciated. I throw in the code that I currently have.
Thanks.
<!DOCTYPE html>
<style>
.star1{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star2{
border-radius:50%;
width:15px;
height:15px;
position:fixed;
animation-name: twinkle;
animation-duration: 2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star3{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: bright;
animation-duration: 3s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star4{
border-radius:50%;
width:10px;
height:10px;
position:fixed;
animation-name: blink;
animation-duration:2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:ease-out;
}
.moon{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px white;
left:350px;
bottom:300px;
}
#keyframes flash{
0%{
top:50px; left:100px; opacity:0.5;
}
50%{
top:50px; left:100px; transform:scale(0.5);opacity:.25;
}
100%{
top:50px; left:100px; opacity:0.5;
}
}
#keyframes twinkle{
0%{
top:250px; left:300px; opacity:0.5;
}
20%{
top:250px; left:300px; transform:scale(0.5);opacity:.25;
}
100%{
top:250px; left:300px; opacity:0.5;
}
}
#keyframes bright{
0%{
top:100px; left:0px; opacity:0.5;
}
50%{
top:125px; left:700px; transform:scale(0.5);opacity:.25;
}
100%{
top:120px; left:700px; transform(0.1); opacity:0;
}
}
#keyframes blink{
0%{
top:100px; left:450px; opacity:0.25;
}
50%{
top:100px; left:450px; transform:scale(0.5);opacity:.15;
}
100%{
top:100px; left:450px; opacity:0.25;
}
}
.h1{
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
}
#keyframes words{
0%{
top:400px; left:300px; opacity:0;
}
50%{
top:400px; left:300px; opacity:1;
}
100%{
top:400px; left:300px; opacity:0; display:none;
}
}
#back {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
</style>
<div id="back"></div>
<div class="moon"></div>
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="h1">Hello</div>
Once the animation is finished the div only has the properties you've defined on it, so just add opacity:0; to .h1.
.h1 {
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
opacity:0;
}
Add animation-fill-mode property to your .h1 class.
.h1{
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes words{
0%{
top:400px; left:300px; opacity:0;
}
50%{
top:400px; left:300px; opacity:1;
}
100%{
top:400px; left:300px; opacity:0; display:none;
}
}
It is required if you want to kept the state of the last frame after animation is over.
You can also add top, left and opacity to the .h1 class those defined in the #keyframes are now used only when this element is animated.
I am trying to solve problem of expanding width of div from right to left and height of different container from bottom to top. I am trying to create CSS animation that will rotate in square and imitate borders of here is link to my CodePen https://codepen.io/Archezi/pen/xReqvq?editors=0100 if that's help.
Here is my HTML .container is a main wrapper .circle is one animation line1-line4 are borders of square that I'm trying to animate.
<div class="container">
<div class="circle "></div>
<div class="line1 "></div>
<div class="line2 "></div>
<div class="line3 "></div>
<div class="line4 "></div>
</div>
Here is my CSS
body {
margin: 0 auto;
}
.container {
position:relative;
margin: 50px auto;
width: 800px;
height:800px;
border:1px solid #000;
}
.circle {
display:inline-block;
width: 25px;
height: 25px;
border-radius:50%;
position: absolute;
top:100px;
left:100px;
background:#000;
animation: myframes 4s ease-in-out 0s infinite;
/* animation-name: myanimation;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-delay: 0s;
animaiton-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running; */
}
.line1 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:105px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:105px;
left:205px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:205px;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
top:205px;
left:105px;
background:green;
animation: squerframe4 2s ease-in-out 3s infinite;
}
#Keyframes squerframe
{
0% { width:15px; opacity: 1; }
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe2
{
0% { height:15px; opacity: 1; }
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#Keyframes squerframe3
{
0% { width:115px; opacity: 0;}
50% { width:115px; }
100%{ width:15px; opacity: 1; }
}
#Keyframes squerframe3
{
0% { width:15px; opacity: 1;}
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe4
{
0% { height:15px; opacity: 1;}
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#keyframes myframes
{
0% { top:100px; left:100px; }
25% { top:100px; left:200px; }
50% { top:200px; left:200px; }
75% { top:200px; left:100px; }
100% { top:100px; left:100px; }
}
Please direct me where to find solutions or point me different approach to this problem. Thank You!
The problem here is that you need for line3 to have an absolute right, so that when the width changes, it will stretch to the left.
Also, line 4, should have an absolute bottom so it will stretch up.
I suggest you add a container or change the dimensions of the current div.container ( as i did in the example ) for the four lines, and use the 4 lines as the extremes of that container.
Here is your example modified as a point of reference on how to continue:
https://codepen.io/anon/pen/MbRvGM?editors=0100
body {
margin: 0 auto;
}
.container {
position:relative;
margin: 50px auto;
width: 115px;
height:115px;
border:1px solid #000;
}
.circle {
display:inline-block;
width: 25px;
height: 25px;
border-radius:50%;
position: absolute;
top:0px;
left:0px;
background:#000;
animation: myframes 4s ease-in-out 0s infinite;
/* animation-name: myanimation;
animation-duration:5s;
animation-timing-function:ease-in-out;
animation-delay: 0s;
animaiton-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running; */
}
.line1 {
height:15px;
width:15px;
position:absolute;
top:0px;
left:0px;
background:red;
animation: squerframe 2s ease-in-out 0s infinite;
}
.line2 {
height:15px;
width:15px;
position:absolute;
top:0px;
left:100px;
background:green;
animation: squerframe2 2s ease-in-out 1s infinite;
}
.line3 {
height:15px;
width:15px;
position:absolute;
top:100px;
right:0px;
float: right;
background-color:red;
animation: squerframe3 2s ease-in-out 2s infinite;
}
.line4 {
height:15px;
width:15px;
position:absolute;
left:0px;
bottom: 0;
background:green;
animation: squerframe4 2s ease-in-out 3s infinite;
}
#Keyframes squerframe
{
0% { width:15px; opacity: 1; }
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe2
{
0% { height:15px; opacity: 1; }
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#Keyframes squerframe3
{
0% { width:115px; opacity: 0;}
50% { width:115px; }
100%{ width:15px; opacity: 1; }
}
#Keyframes squerframe3
{
0% { width:15px; opacity: 1;}
50% { width:115px; }
100%{ width:115px; opacity: 0; }
}
#Keyframes squerframe4
{
0% { height:15px; opacity: 1;}
50% { height:115px; }
100%{ height:115px; opacity: 0; }
}
#keyframes myframes
{
0% { top:0px; left:0px; }
25% { top:0px; left:100px; }
50% { top:100px; left:100px; }
75% { top:100px; left:0px; }
100% { top:0px; left:0px; }
}
Add additional stylings
animation: squerframe4 2s ease-in-out 3s infinite;
-webkit-animation: squerframe4 2s ease-in-out 3s infinite;
-moz-animation: squerframe4 2s ease-in-out 3s infinite;
and for keyframes
#Keyframes squerframe...
#-webkit-Keyframes squerframe...
#-moz-Keyframes squerframe...
Is it possible to create a "growing bar" animation in css?
Example:
http://i.stack.imgur.com/lWIkw.gif
if no is this javascript the right approach?
window.addEventListener("Click",test());
i=0;
function test(){
setTimeout(function(){
i+=5;
document.getElementById('growing-bar').style.height = i + 'px';
if(i<99){
test();
}
},50);
}
#growing-bar{
background:red;
width:50px;
margin:50px;
}
<div id="growing-bar"></div>
working Fiddle
Thanks in advance!
Here's a pure CSS solution:
div {
height: 10px;
width: 50px;
background: black;
animation-name: grow;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes grow {
100% { height: 100px; };
}
<div></div>
You can utilize transform-origin set to top, translate set to 0%, 0%, transform rotate set to 180deg for height animation to be applied vertically; include forwards at animation declaration
#growing-bar{
background:red;
width:50px;
margin:50px;
position:relative;
top:100px;
transform-origin:top;
transform: translate(0%, 0%) rotate(180deg);
animation: grow 20s forwards;
}
#keyframes grow {
from {
height:0px;
}
to {
height:150px;
}
}
<div id="growing-bar"></div>
I want my CSS animation to begin when i click on the button and due to the assignment brief instructions from my course at uni I must use jquery to do so can anybody help me?
$('button').onClick(function(){
$(".florence").addClass(".animate");
});
body{
margin:0;
padding:0;
}
#background {
width:1024px;
height:768px;
position:absolute;
overflow:hidden;
}
button {
width:300px;
height:100px;
color:#1f1f1f;
background-color:#fff;
position:absolute;
top:500px;
left:300px;
z-index:1;
}
.sky {
position:absolute;
top:0;
left:0;
}
.grass {
position:absolute;
top:568px;
left:0;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: grass;
-webkit-animation-timing-function: normal ease-out;
}
.florence {
position:absolute;
top:100px;
left:600px;
float:left;
z-index:1;
}
.animate {
-webkit-animation-duration: 5s;
-webkit-animation-name: florence;
-webkit-animation-timing-function: normal ease-out;
}
.cloud1 {
position:absolute;
top:70px;
left:50px;
float:left;
z-index:1;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudone;
-webkit-animation-timing-function: normal ease-out;
}
.cloud2 {
position:absolute;
top:192px;
left:195px;
float:left;
z-index:1;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudtwo;
-webkit-animation-timing-function: normal ease-out;
}
.cloud3 {
position:absolute;
top:100px;
left:515px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudthree;
-webkit-animation-timing-function: normal ease-out;
}
.cloud4 {
position:absolute;
top:10px;
left:670px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudfour;
-webkit-animation-timing-function: normal ease-out;
}
.cloud5 {
position:absolute;
top:70px;
left:914px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudfive;
-webkit-animation-timing-function: normal ease-out;
}
.sun {
position:absolute;
top:25px;
left:275px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: sun;
-webkit-animation-timing-function: normal ease-out;
}
#-webkit-keyframes cloudone {
0% {
top:-300px;
left:100px;
}
70% {
top:75px;
}
100% {
top: 70px;
left:50px;
}
}
#-webkit-keyframes cloudtwo {
0% {
top:-300px;
left:50px;
}
70% {
top:205px;
}
100% {
top: 192px;
left:195px;
}
}
#-webkit-keyframes cloudthree {
0% {
top:-150px;
left:565px;
}
70% {
top:110px;
}
100% {
top:100px;
left:515px;
}
}
#-webkit-keyframes cloudfour {
0% {
top:-200px;
left:570px;
}
70% {
top:15px;
}
100% {
top:10px;
left:670px;
}
}
#-webkit-keyframes cloudfive {
0% {
top:-300px;
left:1014px;
}
70% {
top:75px;
}
100% {
top:70px;
left:914px;
}
}
#-webkit-keyframes sun {
0% {
top:-300px;
left:100px;
}
70% {
top:65px;
}
100% {
top:25px;
left:275px;
}
}
#-webkit-keyframes florence {
0% {
left:1024px;
}
100% {
left:600px;
}
}
#-webkit-keyframes grass {
0% {
top:590px;
}
100% {
top:568px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Florence the Fluorescent Fuchsia</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="background">
<button>Start</button>
<img class="sky" src="images/sky.png">
<img class="grass" src="images/grass.png">
<img class="florence" class="animate" src="images/florence.png">
<img class="cloud1" src="images/cloud1.png">
<img class="cloud2" src="images/cloud2.png">
<img class="cloud3" src="images/cloud3.png">
<img class="cloud4" src="images/cloud4.png">
<img class="cloud5" src="images/cloud5.png">
<img class="sun" src="images/sun.png">
</div>
</body>
</html>
Try this.
$('button').on('click',function(){
$(".florence").addClass("animate");
});
You have a dot which you dont need in addClass(".animate").
And its click insted of onClick or alternativetly on('click',function(){})
Your ".florence"-element has two class attributes. You need to write it like this:
<img class="florence animate" src="images/florence.png">
And adding the class "animate" a second time won't do anything (the Fiddle example from the comments only worked because the second class attribute gets ignored. If you click a second time on the button it won't work as well since the valid class attribute now has a animate class). You need to remove and add the class again. Unfortunatelly you can't do it right away like this:
$(".florence").removeClass("animate");
$(".florence").addClass("animate");
This will not work either for animations. You need to delay the second step a little:
$('button').click(function(){
$(".florence").removeClass("animate");
setTimeout(function(){
$(".florence").addClass("animate");
},1);
});
This works now. See JSFiddle
http://www.samnorris.co.nz
In the About section under 'Proficiencies' I have a "Skills Progression Bar" list made with CSS, which is supposed to animate using keyframes - but the animation cannot be seen on my page presumably because it is running as soon as the page loads.
Is there any way to delay or trigger the keyframe animations only when the 'Proficiencies' heading/slide is clicked, or alternatively only when the container with the skills bar is visible in the viewport?
I am aware of the various techniques to only run an animation when the page is scrolled to a certain point, but in this instance obviously that's not quite what I want...
Relevant code (for Krish):
CSS
.about-skills {
width:398px;
margin:0;
position:relative;
float:left;
font-size:12px;
line-height:2em;
padding:30px 0 30px;
margin-left: 15px;
}
.skills-col { width:400px; }
.skills-list {
display: none;
list-style:none;
padding-top:20px;
}
.skills-list li {
margin-bottom:50px;
background:#ececec;
height:5px;
border-radius:3px;
border-left:1px solid #cecece;
border-top:1px solid #cecece;
border-right:1px solid #cecece;
border-bottom:1px solid #b5b5b5;
}
.skills-list li em {
position:relative;
top:-30px;
}
.skills-expand {
height:1px;
margin:2px 0;
background:#0dc9ff;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}
.html5 { display: block; width:85%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { display: block; width:70%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { display: block; width:50%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.php { display: block; width:20%; -moz-animation:php 2s ease-out; -webkit-animation:php 2s ease-out; }
.dreamweaver { display: block; width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.photoshop { display: block; width:100%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.responsive { display: block; width:40%; -moz-animation:responsive 2s ease-out; -webkit-animation:responsive 2s ease-out; }
#-moz-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-moz-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-moz-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-moz-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
#-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-webkit-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
jQuery
$('a.proficiencies').click(function(){
$('.skills-list').toggleClass('html5');
});
after look at your code it will work good with the jquery addClass on the click of a link
HTML Structure
<a class="proficiencies">Proficiencies(click)</a>
<ul>
<li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
<li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
</ul>
jQuery
$('a.proficiencies').click(function(){
$('.html5anim').addClass('html5');
$('.css3anim').addClass('css3');
});
Live Demo : http://codepen.io/krish4u/pen/fyehA