.display{
    width: 100%;
    
    background:;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
		}

.display:hover {
    width: 90%;
			}
			
			
			.position1{
    position: fixed;
    top: 400px;
    right: 0px;
				}
				.position2{
    position: fixed;
    top: 400px;
    left: 0px;
				}
				
				.animation {
   /* width: 100px;
    height: 100px; */
    background-color: green;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:green; left:0px; top:0px;}
    25%  {background-color:red; left:10px; top:0px;}
    50%  {background-color:blue; left:10px; top:10px;}
    75%  {background-color:silver; left:0px; top:10px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:green; left:0px; top:0px;}
    25%  {background-color:red; left:10px; top:0px;}
    50%  {background-color:blue; left:10px; top:10px;}
    75%  {background-color:silver; left:0px; top:10px;}
    100% {background-color:yellow; left:0px; top:0px;}
}

		.animation1 {
    width: 100%;
    height:50%; 
    background-image: url('images/image3.jpg'); 
    position: relative;
    -webkit-animation-name: example1; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 50s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example1;
    animation-duration: 50s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example1 {
    0% {background-image: url('images/image3.jpg'); left:0px; top:0px;}
    25%  {background-image: url('images/image1.jpg'); left:10px; top:0px;}
    50%  {background-image: url('images/image2.jpg'); left:10px; top:10px;}
    75%  {background-image: url('images/image3.jpg'); left:0px; top:10px;}
    100% {background-image: url('images/image4.jpg'); left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example1 {
   0% {background-image: url('images/image3.jpg'); left:0px; top:0px;}
    25%  {background-image: url('images/image1.jpg'); left:10px; top:0px;}
    50%  {background-image: url('images/image2.jpg'); left:10px; top:10px;}
    75%  {background-image: url('images/image3.jpg'); left:0px; top:10px;}
    100% {background-image: url('images/image4.jpg'); left:0px; top:0px;}
}

.animation2 {
    width: 100%;
    height: 50%; 
    background-image: url('images/image3.jpg'); 
    position: relative;
    -webkit-animation-name: example2; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 8s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example2 {
    0% {background-image: url('images/image33.jpg'); left:0px; top:0px;}
    25%  {background-image: url('images/image11.jpg'); left:10px; top:0px;}
    50%  {background-image: url('images/image22.jpg'); left:10px; top:10px;}
    75%  {background-image: url('images/image33.jpg'); left:0px; top:10px;}
    100% {background-image: url('images/image44.jpg'); left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example2 {
   0% {background-image: url('images/image33.jpg'); left:0px; top:0px;}
    25%  {background-image: url('images/image11.jpg'); left:10px; top:0px;}
    50%  {background-image: url('images/image22.jpg'); left:10px; top:10px;}
    75%  {background-image: url('images/image33.jpg'); left:0px; top:10px;}
    100% {background-image: url('images/image44.jpg'); left:0px; top:0px;}
}