Update style.css

nafargi · web-flow · commit 4759d8ec4829 · 2024-05-01T06:29:06.000-07:00
diff --git a/20. Animated Navigation/style.css b/20. Animated Navigation/style.css
@@ -45,7 +45,9 @@ nav.active ul {
 nav ul li {
   transform: rotate(0deg);
   opacity: 0;
-  transition: transfrom 0.6s linear, opacity 0.6s linear;
+  transition: transform 0.6s linear, opacity 0.6s linear;  /*---corrected typo error : "transfrom" to "transform" */
+}
+
 }
 
 nav.active ul li {
@@ -78,7 +80,7 @@ nav ul a {
   position: absolute;
   top: 10px;
   left: 5px;
-  transition: transfrom 0.6s linear;
+  transition: transform 0.6s linear; /*---corrected typo error : "transfrom" to "transform" */
 }
 
 .icon .line2 {
@@ -87,9 +89,9 @@ nav ul a {
 }
 
 nav.active .icon .line1 {
-  transform: rotate(-765deg) translateY(5.5px);
+  transform: rotate(-765deg) translateY(5.5px) translateZ(0); /*addition of translateZ(0) it may not have a significant visual effect in this particular case,but it can help optimize the rendering performance, particularly on devices with hardware acceleration support*/
 }
 
 nav.active .icon .line2 {
-  transform: rotate(765deg) translateY(-5.5px);
+  transform: rotate(765deg) translateY(-5.5px) translateZ(0);/*  addition of translateZ(0) it may not have a significant visual effect in this particular case,but it can help optimize the rendering performance, particularly on devices with hardware acceleration support*/
 }

Original file line number	Diff line number	Diff line change
`@@ -45,7 +45,9 @@ nav.active ul {`
`45`	`45`	`nav ul li {`
`46`	`46`	`transform: rotate(0deg);`
`47`	`47`	`opacity: 0;`
`48`		`- transition: transfrom 0.6s linear, opacity 0.6s linear;`
	`48`	`+ transition: transform 0.6s linear, opacity 0.6s linear; /---corrected typo error : "transfrom" to "transform" /`
	`49`	`+}`
	`50`	`+`
`49`	`51`	`}`
`50`	`52`
`51`	`53`	`nav.active ul li {`
`@@ -78,7 +80,7 @@ nav ul a {`
`78`	`80`	`position: absolute;`
`79`	`81`	`top: 10px;`
`80`	`82`	`left: 5px;`
`81`		`- transition: transfrom 0.6s linear;`
	`83`	`+ transition: transform 0.6s linear; /---corrected typo error : "transfrom" to "transform" /`
`82`	`84`	`}`
`83`	`85`
`84`	`86`	`.icon .line2 {`
`@@ -87,9 +89,9 @@ nav ul a {`
`87`	`89`	`}`
`88`	`90`
`89`	`91`	`nav.active .icon .line1 {`
`90`		`- transform: rotate(-765deg) translateY(5.5px);`
	`92`	`+ transform: rotate(-765deg) translateY(5.5px) translateZ(0); /addition of translateZ(0) it may not have a significant visual effect in this particular case,but it can help optimize the rendering performance, particularly on devices with hardware acceleration support/`
`91`	`93`	`}`
`92`	`94`
`93`	`95`	`nav.active .icon .line2 {`
`94`		`- transform: rotate(765deg) translateY(-5.5px);`
	`96`	`+ transform: rotate(765deg) translateY(-5.5px) translateZ(0);/* addition of translateZ(0) it may not have a significant visual effect in this particular case,but it can help optimize the rendering performance, particularly on devices with hardware acceleration support*/`
`95`	`97`	`}`