@keyframes rotate{
	0%		{transform: rotate(-1deg);}
	50%		{transform: rotate(1deg);}
	100%	{transform: rotate(-1deg);}
}

@keyframes rotate-one{
	0%		{transform: rotate(3deg);}
	50%		{transform: rotate(-3deg);}
	100%	{transform: rotate(3deg);}
}

@keyframes pulse{
	0%	{transform: scale(1);}
	50%	{transform: scale(0.98);}
	0%	{transform: scale(1);}
}

@keyframes background {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

* {
	margin: 0;
	padding: 0;
}

body{
	background-color: lime;
}

.css-selector {
    background: linear-gradient(90deg, lime, yellow);
    background-size: 800% 800%;
    animation: background 20s ease infinite;
}

svg{
	width: 100%;
	transform-origin: 3000% 3000%;
}
.eyes{
	width: 25%;
	transform: translateY(-2100px);
	margin-left: 1500px;
}


.hi{
	animation-name: rotate;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction:alternate-reverse;
}

.hello{
	animation-name: rotate-one;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction:alternate-reverse;
}

.bye{
	animation: pulse 2s ease-in-out infinite;
}