Animatin：元素内部徘徊之前div

  • Z时代
  • 2024-01-10
  • 分类：问答

我在动画之前遇到了一些问题：元素之前。这有点凌乱，但即时离开它在我结束了我的工作的阶段。所以Everytinhgs在旁边工作：在元素之前 - FA中的箭头。它应该顺利地滑向右侧，但它只有跳跃的时间才能摆动。Animatin：元素内部徘徊之前div

HTML和CSS：

.seemore span {  
    overflow: hidden;  
    position: relative;  
    color: white;  
    left: -90px;  
    width: 10px !important;  
}  
.seemore {  
    overflow: hidden;  
    transition: all 0.35s ease-in-out;  
}  
.usluga:hover {  
    background: #dc0d1d;  
    transition: all 0.35s ease-in-out;  
}  
.seemore:hover,  
.seemore:focus {  
    /* things won't work in IE 10 without this declaration */  
}  
.usluga:hover .normalfont,  
.usluga:hover .headerfont,  
.usluga:hover .seemore:before {  
    color: white !important;  
    transition: all 0.35s ease-in-out;  
}  
.usluga:hover .seemore span {  
    left: 0px;  
    transition: all 0.35s ease-in-out;  
}  
.seemore:before {  
    content: " ";  
    background: red;  
    widows: 10px;  
    height: 10px;  
    font-style: normal;  
    font-weight: normal;  
    text-decoration: inherit;  
    color: #dc0d1d;  
    font-size: 11px;  
    padding-right: 0.5em;  
    position: absolute;  
}  
.usluga:hover .seemore:before {  
    -webkit-transition: all 0.3s ease-out;  
    -moz-transition: all 0.3s ease-out;  
    -ms-transition: all 0.3s ease-out;  
    -o-transition: all 0.3s ease-out;  
    transition: all 0.3s ease-out;  
}  
.usluga:hover .seemore:before {  
    left: 130px;  
    transition: all 0.3s ease-out;  
}

<div class="usluga">  
    <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont">/print</span></p>  
    <p class="normalfont">Druk<br>Wielkoformatowy</p>  
    <p class="seemore"><span>zobacz więcej</span></p>  
</div>

回答：

转变从初始值都到了新的价值和反弹。

您没有为元素设置的初始left属性。

只需将left: 0添加到最初的统计数据，它应该工作。

.seemore span {  
    overflow: hidden;  
    position: relative;  
    color: white;  
    left: -90px;  
    width: 10px !important;  
}  
.seemore {  
    overflow: hidden;  
    transition: all 0.35s ease-in-out;  
}  
.usluga:hover {  
    background: #dc0d1d;  
    transition: all 0.35s ease-in-out;  
}  
.seemore:hover,  
.seemore:focus {  
    /* things won't work in IE 10 without this declaration */  
}  
.usluga:hover .normalfont,  
.usluga:hover .headerfont,  
.usluga:hover .seemore:before {  
    color: white !important;  
    transition: all 0.35s ease-in-out;  
}  
.usluga:hover .seemore span {  
    left: 0px;  
    transition: all 0.35s ease-in-out;  
}  
.seemore:before {  
    content: " ";  
    background: red;  
    widows: 10px;  
    height: 10px;  
    font-style: normal;  
    font-weight: normal;  
    text-decoration: inherit;  
    color: #dc0d1d;  
    font-size: 11px;  
    padding-right: 0.5em;  
    position: absolute;  
    /* Setting initial 'left' value */  
    left: 0;  
}  
.usluga:hover .seemore:before {  
    -webkit-transition: all 0.3s ease-out;  
    -moz-transition: all 0.3s ease-out;  
    -ms-transition: all 0.3s ease-out;  
    -o-transition: all 0.3s ease-out;  
    transition: all 0.3s ease-out;  
}  
.usluga:hover .seemore:before {  
    left: 130px;  
    transition: all 0.3s ease-out;  
}

<div class="usluga">  
    <p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont">/print</span></p>  
    <p class="normalfont">Druk<br>Wielkoformatowy</p>  
    <p class="seemore"><span>zobacz więcej</span></p>  
</div>

以上是 Animatin：元素内部徘徊之前div 的全部内容， 来源链接： utcz.com/qa/265309.html

回到顶部