今天小编跟大家讲解下有关利用CSS3实现平移动画效果示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用CSS3实现平移动画效果示例代码 的相关资料，希望小伙伴们看了有所帮助。
一、平移动画有关的CSS3属性以及相关的属性描述
1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度 宽度 颜色等）。 2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果 否则效果会变的很生硬）。 3、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率（例如：先快后慢 先慢后快 匀速变化等等）。 4、transition-delay：是用来指定一个动画开始执行的时间 也就是说当改变元素属性值后多长时间开始执行transition效果。
先来三张效果图 由于是一个动态的过程 这里只发三张动态瞬间图片：
二、效果图
图片左侧的文字还没有进入
图片上的四行文字正在逐条进入
图片上四行文字完成动画效果
三、示例代码HTML5全部代码：复制代码代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link href="https://www.aidi.net.cn//css/css/main.css"rel="stylesheet"type="text/css"></head><body> <figure class="test1"> <img src="https://www.aidi.net.cn//css/img/dengfuru3.jpg"class="test1-img"> <figcaption> <h2><font color="white">邓福如</font></h2> <p>《如果有如果》</p> <p>《前面路口停》</p> <p>《邓大福是一只猫》</p> <p>《Nothing On You》</p> </figcaption> </figure></body></html>
CSS3样式代码：复制代码代码如下:body,figure,figcaption,h2,h3,p{ margin: 0; padding: 0;}</p><p>.test1-img{ width: 50%; height:10%; overflow: hidden; margin-left:250px;}</p><p>figure{ position: relative; overflow: hidden; width: 100%; float: left;}</p><p>figcaption{ position: absolute; top:0; left: 0;}</p><p>.test1{ background-color: #2F0000;}</p><p>.test1 figcaption { margin: 20px;}</p><p>.test1 figcaption p{ background-color: #FFF; color: #333; font-family: 微软雅黑; font-weight: 500; letter-spacing: 1px; margin-top: 10px; text-align: center;}</p><p>figure figcaption p{ transition: transform 0.35s;}</p><p>.test1 figcaption p{ transform: translate(-400px,0px);}</p><p>.test1:hover figcaption p{ transform: translate(0px,0px);}</p><p>.test1 figcaption p:nth-of-type(1){ transition-delay: 0.05s;}</p><p>.test1 figcaption p:nth-of-type(2){ transition-delay: 0.10s;}</p><p>.test1 figcaption p:nth-of-type(3){ transition-delay: 0.15s;}</p><p>.test1 figcaption p:nth-of-type(4){ transition-delay: 0.2s;}
总结
以上就是这篇文章的全部内容了 希望本文的内容对大家的学习或者工作能带来一定的帮助 如果有疑问大家可以留言交流。
来源：爱蒂网
