我想从左到右横幅上的translateX
文字。我参考了这个网站https://pereiraodell.com/的动画
他们使用jQuery / javaScript进行动画制作。我希望使用CSS的效果相同。
我试图使用CSS复制相同的效果,但我的不如参考中给出的那样平滑。
在参考站点中,文本动画速度逐渐减慢,不透明度设置工作完美。我无法在我的代码中产生相同的效果,也许我在关键帧中缺少一些断点。 fiddle
并且我想在悬停时显示这个动画,所以当用户徘徊时,文本应该返回到动画的原始位置。
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner:hover .title{
animation: slideInRight 1s;
animation-fill-mode:forwards
}
.banner:hover .description{
animation: slideInRight 1s 80ms;
animation-fill-mode:forwards
}
@keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
检查小提琴,希望这解决你的问题:)
小提琴:http://jsfiddle.net/5vax1uce/68/
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px;
}
.title {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.description {
font-size: 20px;
color: #fff;
padding-top: 10px;
opacity: 0;
transform: translateX(-100px);
transition: all .8s linear;
}
.banner:hover .title {
opacity: 1;
transform: translateX(0);
}
.banner:hover .description {
opacity: 1;
transform: translateX(0);
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
动画的第一个答案
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards
}
.description {
transform: translateX(-1000px);
font-size: 20px;
color: #fff;
padding-top: 10px;
animation: slideOutLeft 1s 80ms;
animation-fill-mode: forwards;
}
.banner:hover .title {
animation: slideInRight 1s;
animation-fill-mode: forwards
}
.banner:hover .description {
animation: slideInRight 1s 80ms;
animation-fill-mode: forwards
}
@keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50% {
opacity: 0.2;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
@keyframes slideOutLeft {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
opacity: 0.8;
}
80% {
opacity: 0.6;
}
100% {
transform: translateX(-100px);
opacity: 0
}
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
转换的第二个答案会带来更好的结果
.banner {
width: 500px;
height: 300px;
background-color: green;
border-radius: 4px;
overflow: hidden;
padding-left: 20px
}
.content {
width: 200px
}
.title {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.description {
transform: translateX(-105%);
opacity: 0;
font-size: 20px;
color: #fff;
padding-top: 10px;
transition: all 1s ease-in;
}
.banner:hover .title,
.banner:hover .description {
transform: translateX(0);
opacity: 1;
transition: all 1s ease-out;
}
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
编辑:这是我一直在谈论的修复,我已经在路径.banner .content .title
和.banner .content .description
上应用了动画。我编辑了你的小提琴。我默认将.content
作为display:none
。当mouseenter
事件被触发时,.content
被更改为display:block
,然后应用动画。我希望它有所帮助。我已经更新了小提琴的链接。
$(".banner").mouseenter(function(){
$(".content").css("display","block");
});
.banner{
width:500px;
height:300px;
background-color:green;
border-radius:4px;
overflow:hidden;
padding-left:20px
}
.content{
width:200px;
display:none;
}
.title{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.description{
transform:translateX(-1000px);
font-size:20px;
color:#fff;
padding-top:10px
}
.banner .content .title{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
.banner .content .description{
animation: slideInRight 1s;
animation-fill-mode:forwards;
}
@keyframes slideInRight {
0% {
transform: translateX(-100px);
opacity: 0;
}
50%{
opacity: 0.2;
}
80%{
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
<div class="content">
<div class="title">
I am Title
</div>
<div class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</div>
</div>
</div>
这是你的fiddle的链接。