I change the vertical position of a container by adding/removing classes, which define the verticle-align of the element. So far everything is working. I would like to animate this movement of the element. Is this possible? And if yes, would this be possible with CSS-animations?
JSFiddle:
http://jsfiddle.net/j1wxc6a1/1/
HTML
<div id="main">
<div id="wrapper" class="col-middle">
<div class="container">
<div id="content" class="top-margin">
<input type="text">
</div>
</div>
</div>
</div>
CSS
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.top {
margin-top: 100px;
}
#main {
display: table;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
height: 100% !important;
}
#wrapper {
display: table-cell;
float: none;
}
JS
$('#wrapper').removeClass('col-middle').addClass('col-top');
$('#content').addClass('top');
Add this css properties to #wrapper:
transition-duration:1s;
-webkit-transition-duration:1s;
and you will get 1 second animation from all style properties change.
Add extra transition-property: vertical-align; to play animation only when vertical-align changed.
Way without setting transition is:
$('#wrapper').animation({'vertical-align': 'top'}, 1000);
it won't work as an Animation , it will just change the position to the top
Demo
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.top {
margin-top: 100px;
}
#main {
display: table;
padding-left: 0px;
padding-right: 0px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
height: 100% !important;
}
#wrapper {
height:300px;
display: table-cell;
float: none
animation: Animate 4s;
-webkit-animation: Animate 4s;
}
#keyframes example
{
from {vertical-align: middle;}
to {vertical-align: top;}
}
-webkit-#keyframes example
{
from {vertical-align: middle;}
to {vertical-align: top;}
}
You can use CSS3 Animation:
See Following Example:
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* 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;}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
also can use JavaScript.
Related
i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}
Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>
.ellenon {
box-sizing: border-box;
width: 350px;
height:350px;
background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
filter: grayscale(100%);
color:white;
transition: 0.5s;
}
.ellenon :where(h1, p) {
line-height:1.5em;
letter-spacing: 1.1px;
padding-right: 10px;
padding-left: 10px;
transition: 0.5s;
}
.ellenon:hover {
filter: grayscale(0%);
}
.ellenon h1:hover {
transform: translate(0px, -20px);
color:transparent;
transition: 0.5s;
}
.ellenon p:hover {
transform: translate(0px, 20px);
color:transparent;
transition: 0.5s;
}
.ellenon2:hover {
transform: translate(0px, -20px);
color:transparent;
}
<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>
Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can't understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?
Thanks
You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
width:50px;
height:50px;
background-color:blue;
}
.outer:hover{
background-color:green;
}
.outer:hover .inner{
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>
use .one:hover .two . if you have hover on .one you change .two
Is there a way you can code javascript to be able to detect the height of your browser and then move a div accordingly to the bottom of that browsers height?
Im wanting to get a footer to stay at the bottom of the page constantly as when I do this with CSS there tends to be a large space of nothing when heading to phone and tablet sizes.
Thanks in advance.
Edit:
Here is a fiddle. If you make the browser smaller you will see space beneath the footer http://jsfiddle.net/4RvWY/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<aside class="socialfade"> <img class="move" src="images/deviant.png">
<img class="move" src="images/yt.png"/>
<img class="move" src="images/fb.png"/>
</aside>
<!--close socialfade!-->
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<aside class="logofade">
<img src="images/logo.png" />
</aside>
<!--close logofade-->
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<aside class="menufade">
<li>HOME
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</aside>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="infotxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab#gmail.com</p>
</div>
<!--close contact!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
#charset"utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family:'Roboto', sans-serif;
color:#CCC;
}
a {
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper {
position:relative;
width:100%;
}
/*---------------------------- Header ----------------------------*/
.header {
position:relative;
min-height:180px;
height: 100%;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-moz-box-shadow: 0px 10px 20px 0px #333;
-webkit-box-shadow: 0px 10px 20px 0px #333;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.logo {
position: absolute;
min-width:60px;
top:4%;
}
.logo img {
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social {
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img {
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu {
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li {
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a {
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt {
width:100%;
text-align: center;
background:#070707;
font-family:'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade {
animation: logofadein 3s;
-moz-animation: logofadein 3s;
/* Firefox */
-webkit-animation: logofadein 3s;
/* Safari and Chrome */
-o-animation: logofadein 3s;
/* Opera */
}
}
#keyframes logofadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes logofadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes logofadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes logofadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- menu Fader ----------------------------*/
.menufade {
opacity:0;
animation: menufadein forwards 3s 1s;
;
-moz-animation: menufadein forwards 3s 1s;
/* Firefox */
-webkit-animation: menufadein forwards 3s 1s;
/* Safari and Chrome */
-o-animation: menufadein forwards 3s 1s;
/* Opera */
}
}
#keyframes menufadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes menufadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes menufadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes menufadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- social Fader ----------------------------*/
.socialfade {
opacity:0;
animation: socialfadein forwards 3s 0.5s;
;
-moz-animation: socialfadein forwards 3s 0.5s;
/* Firefox */
-webkit-animation: socialfadein forwards 3s 0.5s;
/* Safari and Chrome */
-o-animation: socialfadein forwards 3s 0.5s;
/* Opera */
}
}
#keyframes socialfadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes socialfadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes socialfadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes socialfadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#charset"utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt {
margin-top:130px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap {
margin-top:100px;
width:100%;
text-align: center;
/* center align .contacts */
}
/* clearfix */
.detailwrap:after {
content:"";
display: table;
clear: both;
}
.infotxt {
text-align: center;
font-family:'Raleway', sans-serif;
font-size:2em;
font-weight:400;
}
.contact {
display: inline-block;
/* make it possible to use text-align */
width: 15%;
min-width: 180px;
/* avoid 15% being making the contacts less than 115px */
margin: 4% 1% 10% 0;
}
.contact img {
width: 90px;
display: block;
margin: 0 auto;
max-width: 100%;
/*bring back if needed*/
height: auto;
/*bring back if needed*/
}
.contact .text {
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2 {
position:absolute;
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s;
/* Firefox */
-webkit-animation: fadein 5s;
/* Safari and Chrome */
-o-animation: fadein 5s;
/* Opera */
transition: opacity 5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Here is the CSS table layout solution. Just add the below style into your stylesheet.
In table layout, by default table row/rows will auto expand to maximum height available of the entire table. And if we set all the containers to height:100%, that allows the bottom row to be always stay at the bottom of the page.
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
}
.headerwrap, .toptxt, .detailwrap, .footerwrap2 {
display: table-row;
}
.detailwrap {
height: 100%; /*push other rows to their minimal height*/
}
Note, must remove .footerwrap2{position:absolute;} and relevant styles.
Updated - http://jsfiddle.net/4RvWY/17/
CSS should be sufficient here. Did you try position: absolute; bottom: 0px? (Dont forget to set position: relative; on parent element
The window.innerHeight property gives the available window height. That is, the space top to bottom, minus toolbars etc.
Then use element.style.top = innerHeight value to set the div to the appropriate position. Minus an amount from the innerHeight value to give some space from the bottom of the window.
If I've got your idea right this should help:
HTML
<div class="wrapper">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
width: 300px;
margin: 0 auto;
}
.content {
display: table-row;
height: 100%;
background-color: yellow;
}
.footer {
height: 50px;
background-color: red;
}
.header {
height: 50px;
background-color: lightblue;
}
JSFiddle - try to resize window.
Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...
My question is if there's any way to start an animation when the user clicks the button on the screen ?
Here's my code so far:
HTML:
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
CSS:
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
#-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.
$(function(){
$('#second-parent').click(function(){
e1 = $('#first-child');
e1.addClass('animate');
e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
e1.removeClass('animate');
});
});
});
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
#keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#-webkit-keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<div id="first-child"></div><button id="second-parent">Click me !</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function(){
$('#second-parent').on('click',function(){
$('#first-child').addClass('animate');
});
});
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
#keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-child"></div>
<button id="second-parent">Click me !</button>
Use a css class for the animation and add the class to div when button clicked. (use #keyframes to define css animations.)
Here is a solution using pure javascript and CSS #keyframes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Animations</title>
<style>
/* <![CDATA[ */
div {
height: 2em;
width: 50%;
border: 1px solid black;
background-color: black;
color: yellow;
}
.animate {
animation-name: slide-right;
animation-duration: 2s;
/* Preserve the effect of the animation at ending */
animation-fill-mode: forwards;
}
#keyframes slide-right {
from {
margin-left: 0px;
}
50% {
margin-left: 110px;
opacity: 0.5;
}
to {
margin-left: 200px;
opacity: 0.2;
}
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function DoAnimation() {
var targetElement = document.getElementById("target");
targetElement.className = "animate";
}
/* ]]> */
</script>
</head>
<body>
<h1>CSS Animations</h1>
<div id="target">Super div</div>
<button onclick="DoAnimation();">Go</button>
</body>
</html>
Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.anim{
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
Then when you want to trigger the animation simply add the .anim class to your element with jQUery:
$("#first-child").addClass("anim");
Here the sample for you
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
#-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
.second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<script>
$(document).ready(function()
{
$('#Second-parent').click(function()
{
$('#first-child').addClass('second-parent');
});
});
</script>
</head>
<body>
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
</body>
</html>
==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/
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;}
}