元素翻滚着从左侧滚入，自带喜感
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .rli{width:110px;height:80px;margin:56px auto;border-radius:50%;background:linear-gradient(135deg,#f778ba,#e5534b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;animation:kfx-roll 1.2s ease both}
.fx:hover .rli{animation:kfx-roll 1.2s ease both}
@keyframes kfx-roll{from{transform:translateX(-100%) rotate(-540deg);opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}<div class="fx">
<div class="rli">滚入</div>
</div>