Web Tutorial: The Browser Butterfly (Part 2/3)

How do a butterfly's wings move? Or more precisely, how do we simulate the movement of a butterfly's wings?

The divs have been created, now it's all a matter of animating each of them. To do that, we'll leverage on CSS3's 3D transformations and animations. Alter the CSS class perspective as follows. This will allow the divs styled using perspective to act as 3D perspective containers.

        .perspective
        {
            position:relative;
            width:100%;
            height:50%;
            -webkit-perspective:150px;
            -webkit-perspective-origin:50% 50%;
            perspective:150px;
            perspective-origin:50% 50%;
        }

The divs to be animated, of course, are the divs using the CSS classes upperwing and lowerwing. So make the following changes. Here, we haven't specified the animation yet, only the values. The animation-duration property is set at 0.3 seconds, though this will be randomized later. animation-count is set to infinite because we don't want the animation to end. animation-direction is alternate so that the wings will flap back and forth.

        .upperwing,.lowerwing
        {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#FF4400+0,FFEE00+50,FF4400+100 */
            background: #FF4400; /* Old browsers */
            background: -moz-radial-gradient(center, ellipse cover, #FF4400 0%, #FFEE00 50%, #FF4400 100%); /* FF3.6-15 */
            background: -webkit-radial-gradient(center, ellipse cover, #FF4400 0%,#FFEE00 50%,#FF4400 100%); /* Chrome10-25,Safari5.1-6 */
            background: radial-gradient(ellipse at center, #FF4400 0%,#FFEE00 50%,#FF4400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF4400', endColorstr='#FF4400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            -webkit-animation-duration: 0.3s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            animation-duration: 0.3s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

Now we alter the CSS classes for upperwing_left, upperwing_right, lowerwing_left and lowerwing_right to use the animations movewing_left and movewing_right, which will be defined soon. Basically, left wings use movewing_left and right wings use movewing_right.

        .upperwing
        {
            position:absolute;
            width:100%;
            height:100%;
        }

        .upperwing_left
        {
            border-top-left-radius: 10%;
            border-top-right-radius: 80%;
            border-bottom-right-radius: 0%;
            border-bottom-left-radius: 30%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .upperwing_right
        {
            border-top-left-radius: 80%;
            border-top-right-radius: 10%;
            border-bottom-right-radius: 30%;
            border-bottom-left-radius: 0%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

        .lowerwing
        {
            position:absolute;
            top:0;
            width:80%;
            height:80%;
        }

        .lowerwing_left
        {
            right:0;
            border-top-left-radius: 30%;
            border-top-right-radius: 0%;
            border-bottom-right-radius: 80%;
            border-bottom-left-radius: 10%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .lowerwing_right
        {
            left:0;
            border-top-left-radius: 0%;
            border-top-right-radius: 30%;
            border-bottom-right-radius: 10%;
            border-bottom-left-radius: 80%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

Now add this code to define the animations movewing_left and movewing_right. The 3D transformation in question is rotateY.

        .upperwing
        {
            position:absolute;
            width:100%;
            height:100%;
        }

        .upperwing_left
        {
            border-top-left-radius: 10%;
            border-top-right-radius: 80%;
            border-bottom-right-radius: 0%;
            border-bottom-left-radius: 30%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .upperwing_right
        {
            border-top-left-radius: 80%;
            border-top-right-radius: 10%;
            border-bottom-right-radius: 30%;
            border-bottom-left-radius: 0%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

        .lowerwing
        {
            position:absolute;
            top:0;
            width:80%;
            height:80%;
        }

        .lowerwing_left
        {
            right:0;
            border-top-left-radius: 30%;
            border-top-right-radius: 0%;
            border-bottom-right-radius: 80%;
            border-bottom-left-radius: 10%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .lowerwing_right
        {
            left:0;
            border-top-left-radius: 0%;
            border-top-right-radius: 30%;
            border-bottom-right-radius: 10%;
            border-bottom-left-radius: 80%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

        @-webkit-keyframes movewing_left{
            from {-webkit-transform:rotateX(0deg);}
            to {-webkit-transform:rotateY(65deg);}
        }
           
        @keyframes movewing_left{
            from {transform:rotateY(0deg);}
            to {transform:rotateY(65deg);}
        }

        @-webkit-keyframes movewing_right{
            from {-webkit-transform:rotateX(0deg);}
            to {-webkit-transform:rotateY(-65deg);}
        }
           
        @keyframes movewing_right{
            from {transform:rotateY(0deg);}
            to {transform:rotateY(-65deg);}
        }

Now run that code. See a problem? That's right - the wings are moving, but they're moving on their center and not the center of the butterfly.

We need to use the transform-origin property here. Left wings have this set to 100% 50% (rotated on the right side) and right wings have this set to 0% 50% (rotated on the left side).

        .upperwing
        {
            position:absolute;
            width:100%;
            height:100%;
        }

        .upperwing_left
        {
            border-top-left-radius: 10%;
            border-top-right-radius: 80%;
            border-bottom-right-radius: 0%;
            border-bottom-left-radius: 30%;
            -webkit-transform-origin:100% 50%;
            transform-origin:100% 50%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .upperwing_right
        {
            border-top-left-radius: 80%;
            border-top-right-radius: 10%;
            border-bottom-right-radius: 30%;
            border-bottom-left-radius: 0%;
            -webkit-transform-origin:0% 50%;
            transform-origin:0% 50%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

        .lowerwing
        {
            position:absolute;
            top:0;
            width:80%;
            height:80%;
        }

        .lowerwing_left
        {
            right:0;
            border-top-left-radius: 30%;
            border-top-right-radius: 0%;
            border-bottom-right-radius: 80%;
            border-bottom-left-radius: 10%;
            -webkit-transform-origin:100% 50%;
            transform-origin:100% 50%;
            -webkit-animation-name: movewing_left;
            animation-name: movewing_left;
        }

        .lowerwing_right
        {
            left:0;
            border-top-left-radius: 0%;
            border-top-right-radius: 30%;
            border-bottom-right-radius: 10%;
            border-bottom-left-radius: 80%;
            -webkit-transform-origin:0% 50%;
            transform-origin:0% 50%;
            -webkit-animation-name: movewing_right;
            animation-name: movewing_right;
        }

Try again! This time, your butterfly should be flapping its wings smoothly.

Next

Moving the butterfly around the screen, and other niceties. Stay tuned!