/* CSS - ANIMACION */
#divc {
    width: 184px;
    height: 184px;
    background-color: yellow;
    
}
#divb {
    position: relative;
/* llamar animacion */
    animation-name: moverxy;
    animation-iteration-count: infinite;
}
#diva {
    width: 100px;
    height: 50px;
    background-color: yellow;
    border: 1px solid black;
    /* llamar animacion */
    animation-name: rot;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.l1 {
	 opacity:0.9;
}

.TGnd12:hover {
	opacity:1;	
 	animation: z-index: 90;
 	transition: transform 3s;
    	transform: scale(1.2,1.2);
    	animation: z-index: 100;
}
.TGnd15:hover {
	opacity:1;	
 	animation: z-index: 90;
 	transition: transform 3s;
    	transform: scale(1.5,1.5);
    	animation: z-index: 100;
}
.aR90D:hover {
	opacity:1;	
 	animation: z-index: 90;
 	transition: transform 3s;
    	transform: rotate(90deg);
    	animation: z-index: 100;
}
.crecer15:hover {
	opacity:1;	
    animation: crecer15 2s;
    -webkit-animation-fill-mode: forwards;
}
@keyframes crecer15 {
  from { z-index: 90; transform: scale(1); }
  to { z-index: 100; transform: scale(1.5); }
}

/* ANIMACIONES */
/* Cambio de color */
@keyframes color {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}
@keyframes mover {
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}
@keyframes moverxy {
    0%   {left:-150px; top:0px;}
    100% {left:100%; top:0px;}
}
@keyframes scala {
    0%   {transition: transform 2s;; transform: scale(2,2);}
    50%   {transition: transform 2s;; transform: scale(3,3);}
    100%   {transition: transform 2s;; transform: scale(0.5,0.5);}
}
@keyframes def {
    0%   {transition: transform 2s;; transform: skewX(20deg);}
    50%   {transition: transform 2s;; transform: skewY(45deg);}
    100%   {transition: transform 2s;; transform: skew(30deg,30deg);}
}
@keyframes mat {
    0%   {transition: transform 5s;; transform: matrix(1, -0.3, 0, 1, 0, 0);}
}
@keyframes trans {
    0%   {transition: width 2s, height 4s;width: 100px; height: 100px;;}
    50%  {transition: width 2s, height 4s;width: 200px; height: 200px;;}
    100% {transition: width 2s, height 4s;width: 30px; height: 30px;;}
}
@keyframes girar {
    0%  {transform: rotate(90deg);left:100px; top:100px;}
    50%  {transform: rotate(180deg);left:100px; top:100px;}
    100%  {transform: rotate(360deg);left:100px; top:100px;}
}
@keyframes rot {
    0%   {transform: rotateX(60deg);}
    50%   {transform: rotateY(130deg);}
    100%   {transform: rotateZ(145deg);}
}
