Gloster Skin animation #1
Conversation
css/fog.css
Outdated
| /* filter:blur(2px); */ | ||
| /* mix-blend-mode: multiply; */ | ||
| } |
css/fog.css
Outdated
| transform: translateX( | ||
| 970px | ||
| ); |
There was a problem hiding this comment.
can be wrapped in single line... goes for all instances
css/gloster.css
Outdated
| position: absolute; | ||
| scale: 0.5; | ||
| opacity: 0; | ||
| animation: gloster-front-view-animation 6s linear forwards; |
There was a problem hiding this comment.
gloster-front-view-animation animation name is misleading... can we provide a better name?
css/gloster.css
Outdated
| scale: 0.5; | ||
| } | ||
| 10%{ | ||
| opacity: 0; |
css/gloster.css
Outdated
| 50%{ | ||
| opacity: 1; | ||
| scale: 1; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| scale: 1; | ||
| } |
There was a problem hiding this comment.
we changed opacity for 0% -> 25%
after which opacity is constant... so we can remove it from 50% and 100%
css/gloster.css
Outdated
| opacity: 1; | ||
| } | ||
| 50%{ | ||
| opacity: 1; |
css/gloster.css
Outdated
| scale: 1; | ||
| } | ||
| 100% { | ||
| opacity: 1; |
css/gloster.css
Outdated
| } | ||
| 50% { | ||
| opacity: 1; | ||
|
|
There was a problem hiding this comment.
remove space/newlines from all instances
css/mgzs.css
Outdated
| .mgzs-car-container { | ||
| width: 350px; | ||
| height: 100%; | ||
| background-image: url('../assets/mgzs.png'); | ||
| background-repeat: no-repeat; | ||
| background-size: contain; | ||
| position: absolute; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| top: 200px; | ||
| left: calc(50%); | ||
| translate: -10%; | ||
| animation: mgzs-animation 5s linear forwards; | ||
| } | ||
|
|
There was a problem hiding this comment.
merge all css in single file... instead of breaking it in multiple
css/hector.css
Outdated
|
|
||
| @keyframes hector-animation { | ||
| 0% { | ||
| transform: calc(50%); |
There was a problem hiding this comment.
remove calc if not required... check for all instances
css/mgzs.css
Outdated
| top: 200px; | ||
| left: calc(50%); | ||
| translate: -10%; | ||
| animation: mgzs-animation 5s linear forwards; |
There was a problem hiding this comment.
mgzs name is again misleading... can we improve it
|
Modified code according to the comments. |
index.html
Outdated
|
|
||
| <div class="mgzs-car-container"> | ||
| <img | ||
| src="./assets/mgzswheel.png" |
There was a problem hiding this comment.
check can we do it without using image tag
| <link rel="stylesheet" href="./css/mgzs.css" /> | ||
| </head> | ||
|
|
||
| <body> |
There was a problem hiding this comment.
use only 5 div for html and achieve other using css
<div class="fog"></div> <div class="red-car"></div> <div class="blue-car"></div> <div class="middle-car"></div> <div class="introducing-title"></div>
No description provided.