{"id":450,"date":"2025-10-15T01:36:00","date_gmt":"2025-10-14T22:36:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=450"},"modified":"2025-10-17T10:50:55","modified_gmt":"2025-10-17T07:50:55","slug":"html-css-keyframes-animated-head-drawing","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/","title":{"rendered":"Animated Smiley Face With HTML And CSS"},"content":{"rendered":"

I have already presented how to draw faces with plain HTML+CSS<\/a> and we’ve also learned about CSS keyframes animation<\/a>. Let’s combine these two and create a continuously moving face with blinking eyes looking around and with a smiling mouth. Let’s do this using nothing but plain HTML5 CSS3!<\/p>\n

\"drawing<\/a><\/p>\n

Check out the live drawing at the HTML CSS JavaScript home page<\/a> or edit the code at JSFiddle<\/a>.<\/strong><\/p>\n

We need to build the structure of the head first. We use a div for the head with a rounded black border and white background. This will wrap the two eyes with the eyelids and the pupils inside them. Finally we add the mouth. This will be an empty div with a border-bottom with rounded edges creating the illusion of a smiley mouth.<\/p>\n

The HTML Code<\/h2>\n

Now we have the HTML skeleton of Bob (because that’s why I call him).<\/p>\n

<div<\/span> id<\/span>=\"cssHead\"<\/span>><\/span>\n    <div<\/span> class<\/span>=\"cssEye leftEye\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"cssEyeLid\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"cssPupil\"<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"cssEye rightEye\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"cssEyeLid\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"cssPupil\"<\/span>><\/span>                      \n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n    <div<\/span> class<\/span>=\"cssMouth\"<\/span>><\/span>\n    <\/div<\/span>><\/span>          \n<\/div<\/span>><\/span>\n<\/pre>\n
Styling the divs to look like a head<\/h2>\n
For those who are experienced with CSS styling this shouldn’t be a big deal. You might want to come up with your own designs. Here’s how I styled Bob:<\/p>\n
#cssHead<\/span> {\n    margin<\/span>: 20px<\/span><\/span> auto<\/span>;\n    width<\/span>: 180px<\/span><\/span>;\n    background-color<\/span>: #fff<\/span>;\n    height<\/span>: 180px<\/span><\/span>;\n    -webkit-border-radius<\/span>: 500px<\/span><\/span>;\n    border-radius<\/span>: 500px<\/span><\/span>;\n    border<\/span>: 3px<\/span><\/span> solid<\/span> #000<\/span>;\n    -moz-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);\n    -webkit-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);\n    -o-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);\n    -ms-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);\n    transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);\n}\n.cssEye<\/span> {\n    display<\/span>: inline-block<\/span>;\n}\n.cssPupil<\/span> {\n    width<\/span>: 12px<\/span><\/span>;\n    background<\/span>: #000<\/span>;\n    height<\/span>: 12px<\/span><\/span>;\n    margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;\n    -webkit-border-radius<\/span>: 20px<\/span><\/span>;\n    border-radius<\/span>: 20px<\/span><\/span>;\n}\n.cssEyeLid<\/span> {\n    border<\/span>: 1px<\/span><\/span> solid<\/span> #000<\/span>;\n    -webkit-border-radius<\/span>: 20px<\/span><\/span>;\n    border-radius<\/span>: 20px<\/span><\/span>;\n    overflow<\/span>: hidden<\/span>;\n    height<\/span>: 20px<\/span><\/span>;\n    margin<\/span>: 0<\/span>;\n}\n.htmlEye<\/span> {\n    border<\/span>: 1px<\/span><\/span> solid<\/span> #000<\/span>;\n    display<\/span>: inline-block<\/span>;\n    -webkit-border-radius<\/span>: 20px<\/span><\/span>;\n    border-radius<\/span>: 20px<\/span><\/span>;\n}\n.wraphtmlEye<\/span> {\n    background-color<\/span>: #DDD<\/span>;\n    margin<\/span>: 6px<\/span><\/span>;\n    padding<\/span>: 4px<\/span><\/span>;\n    width<\/span>: 25px<\/span><\/span>;\n    height<\/span>: 25px<\/span><\/span>;\n}\n.htmlPupil<\/span> {\n    width<\/span>: 12px<\/span><\/span>;\n    background<\/span>: #000<\/span>;\n    height<\/span>: 12px<\/span><\/span>;\n    margin<\/span>: 6px<\/span><\/span> 4px<\/span><\/span> 3px<\/span><\/span>;\n    -webkit-border-radius<\/span>: 20px<\/span><\/span>;\n    border-radius<\/span>: 20px<\/span><\/span>;\n}\n.rightEye<\/span> {\n    margin<\/span>: 0<\/span>;\n}\n.leftEye<\/span> {\n    margin<\/span>: 50px<\/span><\/span> 4px<\/span><\/span> 0px<\/span><\/span> 66px<\/span><\/span>;\n}\n.cssMouth<\/span> {\n    border-top<\/span>: none<\/span>;\n    border-right<\/span>: none<\/span>;\n    border-left<\/span>: none<\/span>;\n    border-bottom<\/span>: 4px<\/span><\/span> solid<\/span> #000<\/span>;\n    -webkit-border-radius<\/span>: 100px<\/span><\/span>;\n    border-radius<\/span>: 100px<\/span><\/span>;\n    height<\/span>: 20px<\/span><\/span>;\n    width<\/span>: 45px<\/span><\/span>;\n    margin<\/span>: 0px<\/span><\/span> auto<\/span> 0<\/span>;\n}\n<\/pre>\n
I think there’s nothing much to be explained about the code. Not a big deal, just some borders around positioned divs.<\/p>\n
CSS3 Animation Using Keyframes<\/h2>\n
The styles above won’t make Bob move, we have to set up the animations too. I’m setting up cyclically repeating movements for wiggleing the head, moving the pupils, blinking and moving the mouth. I set various cycle durations for each effect to avoid the illusion of repetition.<\/p>\n
Animating The Head<\/h3>\n
I set a 10 seconds cycle and during this Bob’s head, the div element wrapping the whe eyes and the mouth goes through several rotations.<\/p>\n
\/*CSS head animation BEGIN*\/<\/span>\n#cssHead<\/span> {\n    -webkit-animation: headRotations 10s<\/span><\/span> infinite;\n    animation: headRotations 10s<\/span><\/span> infinite;\n}\n@-webkit-keyframes headRotations {\n    0% {    -webkit-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    20% {   -webkit-transform: rotate(2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    25% {   -webkit-transform: rotate(-4deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    28% {   -webkit-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    40% {   -webkit-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    50% {   -webkit-transform: rotate(2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    60% {   -webkit-transform: rotate(-6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    70% {   -webkit-transform: rotate(6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    90% {   -webkit-transform: rotate(6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    100% {  -webkit-transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n}\n@keyframes headRotations {\n    0% {    transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    20% {   transform: rotate(2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    25% {   transform: rotate(-4deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    28% {   transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    40% {   transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    50% {   transform: rotate(2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    60% {   transform: rotate(-6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n    70% {   transform: rotate(6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    90% {   transform: rotate(6deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);     }\n    100% {  transform: rotate(-2deg<\/span><\/span>) skew(-3deg<\/span><\/span>, -2deg<\/span><\/span>);    }\n}\n\/*CSS head animation END*\/<\/span>\n<\/pre>\n
Eye Animation<\/h3>\n
The eye has a blinking effect and it’s continuously looking around. To create the illusion of exploring around I’m moving the two pupils together to avoid squinting.<\/p>\n
The blinking effect is made with reducing the height of the eyelids to 0. The eyelid is the div containging the pupils.<\/p>\n
\/*CSS pupils animation BEGIN*\/<\/span>\n.cssPupil<\/span> {\n    -webkit-animation: lookingAround 20s<\/span><\/span> infinite;\n    animation: lookingAround 20s<\/span><\/span> infinite;\n}\n@-webkit-keyframes lookingAround {\n    0% {    margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    10% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    12% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    27% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    30% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    40% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    43% {   margin<\/span>: 1px<\/span><\/span> 0px<\/span><\/span> 8px<\/span><\/span> 8px<\/span><\/span>;    }\n    46% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    57% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    60% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    63% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    77% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    80% {   margin<\/span>: 6px<\/span><\/span> 4px<\/span><\/span> 3px<\/span><\/span> 4px<\/span><\/span>;    }\n    85% {   margin<\/span>: 6px<\/span><\/span> 4px<\/span><\/span> 3px<\/span><\/span> 4px<\/span><\/span>;    }\n    88% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    92% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    100% {  margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n}\n@keyframes lookingAround {\n    0% {    margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    10% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    12% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    27% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    30% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    40% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    43% {   margin<\/span>: 1px<\/span><\/span> 0px<\/span><\/span> 8px<\/span><\/span> 8px<\/span><\/span>;    }\n    46% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    57% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    60% {   margin<\/span>: 6px<\/span><\/span> 8px<\/span><\/span> 3px<\/span><\/span> 0px<\/span><\/span>;    }\n    63% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    77% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    80% {   margin<\/span>: 6px<\/span><\/span> 4px<\/span><\/span> 3px<\/span><\/span> 4px<\/span><\/span>;    }\n    85% {   margin<\/span>: 6px<\/span><\/span> 4px<\/span><\/span> 3px<\/span><\/span> 4px<\/span><\/span>;    }\n    88% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    92% {   margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n    100% {  margin<\/span>: 6px<\/span><\/span> 0px<\/span><\/span> 3px<\/span><\/span> 8px<\/span><\/span>;    }\n}\n\/*CSS pupils animation END*\/<\/span>\n\/*CSS blinking BEGIN*\/<\/span>\n.cssEyeLid<\/span> {\n    -webkit-animation: blinkingEye 7s<\/span><\/span> infinite;\n    animation: blinkingEye 7s<\/span><\/span> infinite;\n}\n@-webkit-keyframes blinkingEye {\n    0% {    height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    58% {   height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    60% {   height<\/span>: 0px<\/span><\/span>;    margin<\/span>: 10px<\/span><\/span> 0<\/span>; }\n    66% {   height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    100% {  height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n}\n@keyframes blinkingEye {\n    0% {    height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    58% {   height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    60% {   height<\/span>: 0px<\/span><\/span>;    margin<\/span>: 10px<\/span><\/span> 0<\/span>; }\n    66% {   height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n    100% {  height<\/span>: 20px<\/span><\/span>;   margin<\/span>: 0<\/span>;  }\n}\n\/*CSS blinking END*\/<\/span>\n<\/pre>\n
The Mouth<\/h3>\n
Our CSS drawing character needs a mouth to smile. The effect is created by reducing the border-bottom of the mouth div to a smaller size then reducing it to the initial measure and position<\/p>\n
\/*CSS smiling animation BEGIN*\/<\/span>\n.cssMouth<\/span> {\n    -webkit-animation: smilingMouth 8s<\/span><\/span> infinite;\n    animation: smilingMouth 8s<\/span><\/span> infinite;\n}\n@-webkit-keyframes smilingMouth {\n    0% {    height<\/span>: 20px<\/span><\/span>;   border-bottom<\/span>: 3px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: 0px<\/span><\/span> auto<\/span> 0<\/span>;     }\n    20% {   height<\/span>: 35px<\/span><\/span>;   border-bottom<\/span>: 6px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: -10px<\/span><\/span> auto<\/span> 0<\/span>;   }\n    80% {   height<\/span>: 35px<\/span><\/span>;   border-bottom<\/span>: 6px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: -10px<\/span><\/span> auto<\/span> 0<\/span>;   }\n    100% {  height<\/span>: 20px<\/span><\/span>;   border-bottom<\/span>: 3px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: 0px<\/span><\/span> auto<\/span> 0<\/span>;     }\n}\n@keyframes smilingMouth {\n    0% {    height<\/span>: 20px<\/span><\/span>;   border-bottom<\/span>: 3px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: 0px<\/span><\/span> auto<\/span> 0<\/span>;     }\n    20% {   height<\/span>: 35px<\/span><\/span>;   border-bottom<\/span>: 6px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: -10px<\/span><\/span> auto<\/span> 0<\/span>;   }\n    80% {   height<\/span>: 35px<\/span><\/span>;   border-bottom<\/span>: 6px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: -10px<\/span><\/span> auto<\/span> 0<\/span>;   }\n    100% {  height<\/span>: 20px<\/span><\/span>;   border-bottom<\/span>: 3px<\/span><\/span> solid<\/span> #000<\/span>;  margin<\/span>: 0px<\/span><\/span> auto<\/span> 0<\/span>;     }\n}\n\/*CSS smiling animation END*\/<\/span>\n<\/pre>\n
Note that in each animation cycle the last frame (100%) comes back to the initial state (0%) to avoid jumping.<\/p>\n","protected":false},"excerpt":{"rendered":"
I have already presented how to draw faces with plain HTML+CSS and we’ve also learned about CSS keyframes animation. Let’s combine these two and create a continuously moving face with blinking eyes looking around and with a smiling mouth. Let’s do this using nothing but plain HTML5 CSS3!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2,3,4],"tags":[],"class_list":["post-450","post","type-post","status-publish","format-standard","hentry","category-articles","category-css","category-freebies","category-html"],"yoast_head":"\nAnimated Smiley Face With HTML And CSS Keyframes<\/title>\n<meta name=\"description\" content=\"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Smiley Face With HTML And CSS Keyframes\" \/>\n<meta property=\"og:description\" content=\"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-14T22:36:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-17T07:50:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Animated Smiley Face With HTML And CSS\",\"datePublished\":\"2025-10-14T22:36:00+00:00\",\"dateModified\":\"2025-10-17T07:50:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\"},\"wordCount\":410,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\",\"articleSection\":[\"Articles\",\"CSS\",\"Freebies\",\"HTML\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\",\"url\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\",\"name\":\"Animated Smiley Face With HTML And CSS Keyframes\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\",\"datePublished\":\"2025-10-14T22:36:00+00:00\",\"dateModified\":\"2025-10-17T07:50:55+00:00\",\"description\":\"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg\",\"width\":600,\"height\":150,\"caption\":\"drawing animated smiley css3 keyframes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Smiley Face With HTML And CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Smiley Face With HTML And CSS Keyframes","description":"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/","og_locale":"en_GB","og_type":"article","og_title":"Animated Smiley Face With HTML And CSS Keyframes","og_description":"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face","og_url":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2025-10-14T22:36:00+00:00","article_modified_time":"2025-10-17T07:50:55+00:00","og_image":[{"width":600,"height":150,"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg","type":"image\/jpeg"}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Animated Smiley Face With HTML And CSS","datePublished":"2025-10-14T22:36:00+00:00","dateModified":"2025-10-17T07:50:55+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/"},"wordCount":410,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg","articleSection":["Articles","CSS","Freebies","HTML"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/","url":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/","name":"Animated Smiley Face With HTML And CSS Keyframes","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg","datePublished":"2025-10-14T22:36:00+00:00","dateModified":"2025-10-17T07:50:55+00:00","description":"how to draw faces with plain HTML+CSS and we've also learned about CSS keyframes animation. Let's combine these two and create a moving face","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/11\/animated-smiley-face-css3-keyframes.jpg","width":600,"height":150,"caption":"drawing animated smiley css3 keyframes"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/html-css-keyframes-animated-head-drawing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Animated Smiley Face With HTML And CSS"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=450"}],"version-history":[{"count":4,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/450\/revisions"}],"predecessor-version":[{"id":1193,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/450\/revisions\/1193"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}