Tuesday 6 August 2013

EXAMPLES OF PSEUDO-ELEMENTS ANIMATIONS AND TRANSITIONS - Part 4

EXAMPLE 4

AnimatingTransitioningPseudoElements04
This is the most crazy and extravagant example from all: a little one-eyed flying creature!
We are going to use both, animations and transitions.

The Markup

1
<div class="pojoro">●</div>
We will use one element for the creature’s eye.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
.pojoro  {
    background: rgba( 255, 255, 255, 1);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
    border-radius: 100%;
     
    /* box-shadow: secondary color, body, eyelash */
     
    box-shadow: 0 0 0 0.2em rgb(146,89,149),
                0 0 0.1em 0.55em rgb(176,89,179),
                inset 0 0.2em 0 0 rgb(136,79,139);
     
    /* ojo (eye) */
     
    color: rgba( 40, 40, 40, 0.8);
    line-height: 1.1em;
    padding-left: 0.18em;
    -webkit-font-smoothing: antialiased;
    user-select: none;
     
    /* usability, position and transition */
     
    cursor: pointer;
    position: relative;
    margin: 5em auto 0 auto;
    width: 1em; height: 1em;
    transform-origin: center;
    transition: all 0.8s ease-in-out;
     
    /* Separate the animations to have a better control over the eye and the body */
     
    animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite;
}
 
/* Elevate and distort the creature. */
 
.pojoro:hover  {
    transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}
 
/* wings */
 
.pojoro:before,
.pojoro:after  {
    background: rgba(0,0,0,0);
    border-radius: 100%;
    content: "";
     
    /* display:none, hide wings */
     
    display: none;
    position: absolute;
    width: 1em; height: 0.1em;
    -webkit-filter: blur(1px);
    transition: all 0.2s;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
.pojoro:before  {
    top: 25%; left: 1.45em;
    margin-left: -1em;
    transform-origin: left;
    transform: rotate(-60deg);
    animation-name: wings;
}
 
.pojoro:after  {
    top: 25%; left: -2.2em;
    margin-left: 1em;
    transform-origin: right;
    transform: rotate(60deg);
    animation-name: wings2;
}
 
.pojoro:hover:before,
.pojoro:hover:after  {
    background: rgba(100,100,100,0.8);
     
    /* display:block, we allow the wings to appear and the animation starts */
     
    display: block;
    margin-left: 0em;
    width: 2em; height: 0.3em;
}
 
@keyframes eye  {
 
    /* Eye movement */
     
    5%, 10%  {
        line-height: 1.2em;
        padding-left: 0em;
    }
    15%, 20%  {
        line-height: 1.15em;
        padding-left: 0.4em;
    }
     
    /* Eyelash movement */
     
    25%  {
        box-shadow: 0 0 0 0.2em rgb(146,89,149),
                    0 0 0.1em 0.55em rgb(166,89,169),
                    inset 0 1em 0 0 rgb(136,79,139);
    }
    23%, 27%  {
        box-shadow: 0 0 0 0.2em rgb(146,89,149),
                    0 0 0.1em 0.55em rgb(166,89,169),
                    inset 0 0.2em 0 0 rgb(136,79,139);
    }
}
 
@keyframes body  {
    50%  {
        width: 1.4em; height: 1.4em;
    }
}
 
@keyframes wings  {
    50%  {
        transform: rotate(65deg);
    }
}
 
@keyframes wings2  {
    50%  {
        transform: rotate(-65deg);
    }
}
On hover we activate the wings animations and the body stars to elevate.
And that was the last example!
In conclusion, pseudo-element are a great thing and combining them with animations and transitions allow for the creation of some fun effects without using too much markup or images. Wider browser support is hopefully coming soon; until then we can play with it and discover fun and interesting techniques.
What do you think about it?
I hope that this will be useful for you and serve as an inspiration.