Transform, Transition and Animation - Delay, Shorthand, All Properties

Author: pktcodes

styles.css

@@ -1,7 +1,7 @@
 /* 
 transition: change over time
-transition-property:
-transition-duration:
+transition-delay:
+shorthand
 */
 
 div {
@@ -10,27 +10,30 @@ div {
   display: inline-block;
 }
 
-div:hover {
-  background: chartreuse;
-}
-
 .one {
   background: red;
 }
 
 .two {
   background: blue;
-  transition-property: background, border-radius;
+  /* transition-property: background, border-radius;
+  transition-duration: 4s, 2s; */
 
-  /* 4s for all transition-properties*/
-  /* transition-duration: 4s; */
+  /* transition delay */
+  /* transition-delay: 2s; */
 
-  /* 4s for background, 2s for border-radius */
-  transition-duration: 4s, 2s;
+  /* Transition shorthand for specific*/
+  /* transition: background 4s 2s, border-radius 2s 1s; */
+
+  /* Transition shorthand for all */
+  transition: all 2s 1s;
 }
 
 .two:hover {
+  background: chartreuse;
   border-radius: 50%;
+  transform: scale(2, 2);
+  margin-top: 50%;
 }
 
 .three {