css - 来自Bottom的CSS动画没有动画
问题描述
我在这里有一个 jsfiddle,名为 fromBottom 的动画不起作用。
http://jsfiddle.net/8g5r2qcw/1/
html
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
<a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
</div>
</header>
相关的CSS
/* this animation not working */
@keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
animation: fromBottom .5s ease-out;
}
我希望按钮在加载页面时从底部移动到其原始位置。
解决方案
尝试添加display: inline-block;
到你的.btn--animated
,它会工作的。
.header
{
background-image: url(https://images2.minutemediacdn.com/image/upload/c_crop,h_2450,w_4368,x_0,y_165/f_auto,q_auto,w_1100/v1562080363/shape/mentalfloss/29942-gettyimages-155302141.jpg);
background-blend-mode: multiply;
height: 80vh;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 70%);
position: relative;
}
.header::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, #34c9eb, #0c4f5e);
opacity: 0.9;
z-index: -1;
}
.header__logo-box
{
position: absolute;
top: 5px;
left: 0;
width: 80px;
}
.header__logo
{
width: 100%;
height: 100%;
}
.header__text-box
{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary--main
{
display: block;
}
.heading-primary--sub
{
display: block;
}
.btn
{
padding: 10px 30px;
text-decoration: none;
color: inherit;
border-radius: 100px;
position: relative;
}
.btn--white
{
background-color: #fff;
}
.btn::after
{
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .4s;
background-color: red;
z-index: -1;
border-radius: 100px;
}
.btn:hover::after
{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
/* this animation not working */
@keyframes fromBottom
{
0%
{
opacity: 0;
transform: translateY(100px);
}
100%
{
opacity: 1;
transform: translateY(0);
}
}
.btn--animated
{
display: inline-block;
animation: fromBottom .5s ease-out;
}
<header class="header">
<div class="header__logo-box">
<img src="https://dtgxwmigmg3gc.cloudfront.net/imagery/assets/derivations/icon/256/256/true/eyJpZCI6ImE4OWEzMGU2YTg5NTViYjcxZWY1OTJiNDlkYjZjMTRhLmpwZyIsInN0b3JhZ2UiOiJwdWJsaWNfc3RvcmUifQ?signature=8735e0713b1bd34828e75056d2c51efc7ffc62c0167dcb80e7d66fe8550b9bc6" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
<a href="#section-tours" class="btn btn--white btn--animated">Discover our tours</a>
</div>
</header>
推荐阅读
- cmd - CMD 将所有文件跨任何子文件夹移动到现有级别并删除子文件夹
- c# - Microsoft Graph API 自定义列未显示在项目字段中
- mysql - 使用“键集分页”重置计数
- python-3.x - python-plotly 在同一图中具有相同 Y 轴的多条线
- javascript - 状态更新时重新渲染反应组件
- javascript - 地图图层在初始加载后不会再次渲染
- css - 为什么 div 标签没有通过其 className 更改 css?
- asio - 有没有我可以学习的教程来了解 Steinberg ASIO SDK?
- arrays - 用文本文件中的字符串填充数组,数组的每个元素都是相同的
- python - dtype的图像数据
我的图像有错误,但不知道如何解决。任何人都可以帮我吗?
错误:
<class 'pandas.core.frame.DataFrame'> RangeIndex: 3929 个条目,0 到 3928 个数据列(共 4 列):
列非空计数 Dtype