Issue
In this example it is clear why the grow animation works:
@keyframes grow {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
However, why does it also work in the below code snippet?
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: grow 5s;
}
@keyframes grow {
0% {
transform: scaleX(0);
}
}
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
</html>Solution
The animation starts with the requested value but ends with the default value which is without the transform property
Answered By - mianbato
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.