Frontend Forever

Emoji Animation

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Emoji Animation. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

EMOJI

The term "emoji," that has Japanese ancestries, refers to the somewhat ideogram secondhand in photoelectric to foreshadow on movable phones and computer network location on the world wide web by way of of graphical ideas.

The name "emoji" is a shortening that nearly converts as "letters of a writing system" and arises the kanji for "countenance" and "individuality." The phrase "smiley," that is kind of analogous to emoji, bear not misunderstand cognizant. Emoji are real photos that are used to imitate fervors, first verbalizations, projects, objects, and mammals, containing, opposite to emoticons, that are typographic likenesses of empathy or verbalization.

Emoji's recognition and thorough enactment have cued few spectators to equate their use to the concoction of a new representative word. Emoji are still progressing continually, accompanying miscellaneous emoji progressing for miscellaneous aims. Emojigraphy is a form of fundamental alphabet that engages emoji as the word. Emojipedia is another means that specifies news about the happening of emoji letters, their image, and their messages. World Emoji Day was settled in 2014 by Jeremy Burge, the inventor of Emojipedia.

World Emoji Day is noticed on July 17 and is moment of truth place emoji habit on public radio policies is advanced. On World Emoji Day earlier, builders from Apple, Google, and Android have started new emoji order feasting cultural and neuter difference.

Example code

@keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

Keyframe Rules

from

A starting offset of 0%.

An ending offset of 100%.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
	background: black;
}
.face{
	height: 300px;
	width: 300px;
	position: relative;
	border-radius: 50%;
	background: yellow;
	margin: 100px auto;
}
.eye1{
	height: 80px;
	width: 80px;
	border-radius: 50%;
	position: absolute;
	left:40px;
	top: 70px;
	background: white;
}
.eyeball1{
	height: 30px;
	width: 30px;
	border-radius: 50%;
	left: 65px;
	top:95px;
	position: absolute;
	background: black;
}
.eye2{
	height: 80px;
	width: 80px;
	border-radius: 50%;
	position: absolute;
	left:180px;
	top: 70px;
	background: white;
}
.eyeball2{
	height: 30px;
	width: 30px;
	border-radius: 50%;
	left: 204px;
	top:95px;
	position: absolute;
	background: black;
}
.eyeball1,.eyeball2{
	animation: move 4s ease-in-out infinite;
}
@keyframes move{
	0%{
		transform: translateY(-20px);
	}
	50%{
		transform:translateY(20px);
	}
	100%{
		transform: translateY(-20px);
	}
}
.mouth{
	height: 10px;
	width: 60px;
	left: 120px;
	top:210px;
	border-radius: 10px;
	position: absolute;
	background: black;
}
.tongue{
	height: 30px;
	width: 50px;
	left: 125px;
	top:220px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	position: absolute;
	background: red;
	animation: tongue 4s ease-in-out infinite ;
}
@keyframes tongue{
	0%{
		height: 0px;
	}
	50%{
		height: 39px;
	}
	100%{	
		height: 1px;
	}
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Emoji Animation

About this Code

EMOJI

Example code

Keyframe Rules

Images

Youtube Tutorial Video

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever