CSS3 Now - Animation, Transparency, and More (Part 2)

    Continuing the series of articles “CSS3 Now!” ( The first article is CSS Transitions ), I would like to talk about animation using CSS3, specifically @keyframe and animate . Also, in the article we will touch upon the opacity properties and the rgba () color model , cross-browser use of border-radius , box-shadow and gradients .


    Keyframe


    Currently, support for such animation exists only in WebKit-based browsers - Chrome and Safari. But the topic is so interesting that it is worth considering - because the future is not far off, and soon other browsers will catch up with Chrome.

    The first point in creating CSS animations is the creation of keyframes (keyframes). In general, a Keyframe is a set of rules that will be applied throughout an animation. you can make a rough comparison of keyframes with functions - first we declare keyframes, and then call this animation anywhere in CSS.

    Let's make an example of a simple animation - when you hover over a ball, it starts to jump.
    Ball:
    #ball {
    	width: 60px;
    	height: 60px;
    	border-radius: 30px;
    	background: #f00;
    	position: absolute;
    	bottom: 0;
    	}

    Now create the keyframes:
    @-webkit-keyframes bounce {
    	0%	{ bottom: 0; }
    	50%	{ bottom: 100px; }
    	100%	{ bottom: 0; }
    	}


    First we set the name of our animation - in the example it will be “bounce”. Then we describe the key frames of the animation:
    0% { bottom: 0; }- at the beginning, the ball is at the starting position;
    50% { bottom: 100px; }- in the middle of the animation, the ball reaches its maximum height;
    100% { bottom: 0; }- by the end of the animation, the ball falls to its original place.

    Create an animation:
    #ball:hover {
    	-webkit-animation: bounce 1s infinite ease;
    	}

    With this code, we set the animation when you hover over the ball. The procedure is as follows: <название нашего keyframe> <время анимации> <количество итераций> <временная функция>.

    Done ! Our ball is jumping like a bun! Now look at this example . The combination of box-shadow and keyframes gives us a wonderful form highlighting effect for emphasis. It can be used, for example, when checking forms to highlight erroneous fields.
    Pulse Shape Code:
    @-webkit-keyframes pulse {
    	0% {
    	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
    	}
    	50% {
    	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
    	}
    	100% {
    	-webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
    	}
    }
    form input[type="text"]:focus {
    	-webkit-animation: pulse 1.5s infinite ease-in-out;
    }

    The promised rgba () is visible in the code. As many have already realized, this is the RGB color model + alpha channel, which allows us to set translucency where it is needed.

    Opacity


    But this property can already be used to the fullest - it works in all browsers, except for our beloved. True, there is the following fix for IE:
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    Here is an example of a translucent cross-browser button:
    
    .foo {
    	opacity: 0.5;
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    }

    For those who do not know yet - there is a wonderful CSS3Pie thing - it allows us to use rounded corners, shadow and gradients right now and absolutely cross-browser: IE 6-8, Chrome, Safari, Mozilla, Opera! An example of cross-browser use of all these properties:
    
    border: 1px solid #696;
    padding: 60px 0;
    text-align: center; width: 200px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: #666 0px 2px 3px;
    -moz-box-shadow: #666 0px 2px 3px;
    box-shadow: #666 0px 2px 3px;
    background: #EEFF99;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
    background: -moz-linear-gradient(#EEFF99, #66EE33);
    background: linear-gradient(#EEFF99, #66EE33);
    -pie-background: linear-gradient(#EEFF99, #66EE33);
    behavior: url(/PIE.htc);
    

    Test pages: ball , shape , cross-browser properties .

    Thank you for your attention and enjoy your layout!

    Also popular now: