如何使用 css3 动画将宽度和高度设为 100%?
how to animate width and height 100% using css3 animations?
我有以下代码
HTML
<div></div>
css
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 0.3s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
我想做的是将 div 的宽度和高度放大到 100% 以覆盖整个浏览器。我不知道如何设置 100% 高度的动画。我在 google 上进行了搜索。找不到运气
您需要指定 100% 的内容..在这种情况下,html/body
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 1s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
<div></div>
您还需要将 html
和 body
标签设置为 100%
以欺骗浏览器。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 0.3s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
<div></div>
.mydiv {
animation-name: test-animation;
animation-duration: 1s;
}
@keyframes test-animation {
from {
width:0px;
}
to {
width:calc( 100% - 1px );
}
}
这是一个很好的选择,通过使用 calc() 函数将宽度从 0px 设置为几乎 100%,return 几乎达到 100% 的宽度。
我有以下代码
HTML
<div></div>
css
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 0.3s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
我想做的是将 div 的宽度和高度放大到 100% 以覆盖整个浏览器。我不知道如何设置 100% 高度的动画。我在 google 上进行了搜索。找不到运气
您需要指定 100% 的内容..在这种情况下,html/body
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 1s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
<div></div>
您还需要将 html
和 body
标签设置为 100%
以欺骗浏览器。
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
div {
background: tomato;
width: 100px;
height: 100px;
-webkit-animation: animateThis 0.3s ease-in;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animateThis {
0% {
width: 100px;
height: 100px;
}
100% {
width: 100%;
height: 100%;
}
}
<div></div>
.mydiv {
animation-name: test-animation;
animation-duration: 1s;
}
@keyframes test-animation {
from {
width:0px;
}
to {
width:calc( 100% - 1px );
}
}
这是一个很好的选择,通过使用 calc() 函数将宽度从 0px 设置为几乎 100%,return 几乎达到 100% 的宽度。