body{
    
}
.transEx {
	margin: 2.25em;
	color: #fff;
	line-height: 70px;
	-webkit-transition: all 3s .4s;
	-moz-transition: all 2s .5s;
	-o-transition: all 2s .5s;
	transition: all 3s .4s;
}
div{
    width: 100px;
    height: 75px;
    text-align: center;
    background-color: #5efea0;
    border: 3px groove #fff;
    border-radius: 5px;
    padding: 5px;
}
#ease-in-out {
	-webkit-transition-timing-function: ease-in-out;	
	-moz-transition-timing-function: ease-in-out;	
	-o-transition-timing-function: ease-in-out;	
	transition-timing-function: ease-in-out;
}
.transEx:hover {
	background-color: #a9071a;
	color: #FFFFFF;
    width: 135px;
    height: 100px;
	-webkit-transform: translate(500px, 0);
	-moz-transform: translate(500px, 0);
	-o-transform: translate(500px, 0);
	transform: translate(500px, 0);
}
@keyframes moving {
    from {
        top: 0px;
        color: #ffffff;
    }
    to {
        top: 250px;
        color: #000;
    }
  }
@keyframes moved {
    from{
        text-decoration: none;
    }
    to{
        text-decoration: line-through;
    }
}
#animation{
    width: 100px;
    height: 100px;
    position: relative;
    background: linear-gradient(to right, red , blue);
    animation: moving 5s infinite;
}
h2:hover{
    animation: moved 2s ease-in;
}