I have an image of a little tree and I would like to make it grow from bottom to top using jQuery and CSS.
For the moment the tree has bottom position to 0 and goes up with animate() jQuery function.
I can make a div that overlaps to the tree and animate it with animate() jquery function and removing the height to it, but the original background (of the body) uses a CSS gradient so I can't make the div overlap the image.
Here is my code:
CSS:
.wrap_tree{
height:300px;
position:relative;
}
.tree{
overflow: hidden;
position:absolute;
display:none;
bottom:0px;
width:200px;
left:28%;
}
HTML:
<div class="wrap_tree">
<div class="tree">
<img src="tree.png"/>
</div>
</div>
JavaScript/jQuery:
$('.tree').animate({
height: 'toggle'
},5000);
How about doing this with Pure CSS? I made it from scratch using CSS3 #keyframe
Explanation: Am just overlapping the tree using an absolute positioned element, and than using #keyframe am collapsing the height property to 0, rest is self explanatory.
Demo
Demo 2 (Added position: relative; to the container element as this is important to do else your position: absolute; element will run out in the wild)
Demo 3 Tweaking up animation-duration for slower animation rate
.tree {
width: 300px;
position: relative;
}
.tree > div {
position: absolute;
height: 100%;
width: 100%;
background: #fff;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-name: hello;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.tree img {
max-width: 100%;
}
#keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
#-webkit-keyframes hello {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
HTML
<div><img src="image03.png" /></div>
CSS
div {
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
animation: myfirst 5s linear 2s infinite alternate;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes myfirst {
0% {left:0px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}
/* Standard syntax */
#keyframes myfirst {
0% {left:0px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}
Related
I have been trying to change the CSS animation duration via the following code:
.button{
-webkit-animation-name: effect;
-webkit-animation-duration: 0.05s;
}
#keyframes effect {
0% { opacity: 0.0;
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
and
$('.button').css("-webkit-animation-duration", "3s" );
It's working in both Chrome and Firefox (by using -moz-animation-duration) but not in Safari, even if I have the -webkit- prefix.
Thank you :)
Please try this code
button {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>Using negative values: Here, the animation will start as if it had already been playing for 2 seconds:</p>
<button type="button">Go</button>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
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>
So I'm trying to change the animation of speed of something on my page, however when I try and use a variable name in the string portion the animation breaks. I'm sure this just has to do with how I am handling the string, but I already tried a couple of alternatives and my animation still breaks either way. If somehow could advise me I would be appreciative.
var speed = 5;
speed = speed.toString() + 's infinite';
$('#ball').click(function () {
$('#ball').css('animation', 'bounce' + speed);
});
Bottom features include an animation;
animation-name: initial;
animation-duration: 3s;
animation-timing-function: bounce;
animation-delay: initial;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
Animation enriched by editing with them.
I guess it's much better just update the classname for instance you have a two classes:
.animate {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 1s;
}
.slower{
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
#keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
And then you handle this with jQuery as follows:
$('#ball').click(function () {
$(this).addClass('slower');
});
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);
}
}