Landing Page

Remaking the landing page, should look OK on latest version of webkit, firefox and ie but i haven’t done anything for mobile yet.

Tags: , ,

CSS Animations 2

This is an example of the difficulty of using the ‘animation’ property for a dropdown menu. This uses ‘animation’:

So animation takes a lot more CSS and will play once when the page is ready and will always play the animation from is end position when we release the hover. NB:Leaving the start point of the reverse keyframes blank wont work either. Not good. Now transition:

Using the transition property seems much more manageable for general use, however we can’t make use of ‘keyframes’ with transitions ie. we can only set a start and end point and nothing in between. In this example we don’t need them, the animation only uses start and end keyframes anyway. So what happens if we add a 50% keyframe with a color change and try to mix the two…

DAMN! Unfortunately the two are incompatible. While having the ability to use keyframes is cool its going to take a lot of effort and JS to get things behaving acceptably with :hover.
So here’s a toggle version with code.

CSS:

#animations5 {
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    position:relative;
    width:25%;
    height:50px;
    background:#fcaf3e
}
#animations5 a {
    cursor:pointer;
    display:block;
    width:100%;
    text-align:center;
    color:#fff
}
#animations5 a:hover {
    color:#000;
    background:rgba(255, 255, 255, .1)
}
#animations5 ul {
    list-style:none;
    line-height:50px;
    margin:0;
    padding:0
}
#animations5>ul>li {
    position:relative;
    width:100%;
    height:50px;
    color:#fff
}
#animations5>ul>li>ul {
    position:absolute;
    top:50px;
    left:0;
    background:#fcaf3e;
    width:100%;
    height:0;
    overflow:hidden;
    -webkit-transition:height 2s;
}
@-webkit-keyframes animations5 {
    0%  {height:0; -webkit-transform: rotateX(0deg) rotateY(0deg);}
    25% {background:#FF0DFF;}
    50% {background:#24EEFF;-webkit-transform: rotateX(180deg) rotateY(90deg);}
    75% {-webkit-transform: rotateY(360deg);}
    100%{height:400%; -webkit-transform: rotateX(360deg) rotateY(0deg);}
}
.on{
    height:400% !important;
    display:block;
    -webkit-animation:animations5 2s ease-out;
}

HTML:

<div id="animations5">
<ul>
<li><a>Boats</a>
<ul>
<li><a href="#">Catamaran</a></li>
<li><a href="#">Dhow</a></li>
<li><a href="#">Carrack</a></li>
<li><a href="#">Sloop-of-war</a></li>
</ul>
</li>
</ul>
</div>

jQuery:

$(document).ready(function(){
    $('#animations5>ul>li>a').click(function(){
        $('#animations5>ul>li>ul').toggleClass('on');
    });
});

Result:

Though you might want to try to do a more tastefull animation as this is starting to look like a early 00′s flash based fever dream.

Tags: , , ,

CSS Amimations

I used the animation property in CSS for the first time yesterday. Here’s an overview of some of the basics.
NB: I’m only doing these examples for ‘-webkit-’ as it saves a lot of space, meaning they’re only going to display if you are using chrome or safari.

Here’s the css to get a rolling ball:

/*a container to set position: relative;*/
 .animation {
    position: relative;
    width: 100%;
    height: 100px;
}
#ball {
    -webkit-animation:ball 2s ease-out;
/*this triggers '@-webkit-keyframes ball', 2s makes the % values apply to a time of 2 seconds, the 'ease-out' weights them towards the end of the 2 seconds*/
    background: rgba(114, 159, 207, 1);
    left:74%;
    border-radius: 50%;
    position: absolute;
    top:0;
    left:74%;
    /*NB, regardless of where the animation ends the ball would return to this position afterwards*/
    height: 100px;
    width: 100px;
}
#ball p {
    text-align: center;
    line-height: 100px;
}
/*finally the animation itself, works the same way as transitions, we could set the % values to anything and have as many as we want. This extra level of controll is really what diferentiats it from 'transition'*/
 @-webkit-keyframes ball {
    0% {left:0;-webkit-transform:rotate(0deg);}
    50% {left:90%;-webkit-transform:rotate(360deg);}
    100% {left:74%;-webkit-transform:rotate(0deg);}
}

note, we would need a separate version of the keyframes and the animation property with and without “-webkit-” for browser compatability. (the demos will only work in chrome/safari) and the result:

example

This is a simple example, it’ll run once as soon as the page is ready and then stop. This is because the ‘animation:’ call is included as part of the #ball div. Sticking with pure CSS we can attach it to a :hover or some other selector like so:

example

Though as you can probably see this isn’t a very desirable effect. We should at least stick the :hover to a parent to get rid of the flicker:

.animation:hover>#ball3{-webkit-animation:ball3 2s ease-out;}

example

But as i see it 'animation:' is really for longer and more complicated animations and for those to be worthwhile your really looking for some sort of toggleable trigger.
Its worth noting that animations attached to divs run as soon as the page is ready, not when when all images etc. have loaded, this means even an animation that's intended to run as soon as a user visits a page is better controlled with a jQuery .load command, you can just add a class containing the 'animation:' property:

$(window).load(function () {
	$('#ball').addClass('ball-animation');
});

.ball-animation {-webkit-animation:ball 2s ease-out;}

or do the same thing with any other trigger, scrolling to an element, clicking a button etc. I'll try to give some more practical examples soon.