利⽤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="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<figure class="test1">
<img src="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;/*使⽤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标签进⾏样式设计*/
.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下⾯的所有的p标签加上动画延时效果*/html5开发示例
figure figcaption p{
transition: transform 0.35s;
}</p> <p>/*将test1⾥⾯的⽂字内容移出页⾯*/
.test1 figcaption p{
transform: translate(-400px,0px);
}</p> <p>
/*当⿏标滑过外部容器figure的时候改变p标签和h2标签的位置*/
.test1:hover figcaption p{
transform: translate(0px,0px);
}</p> <p>/*为了实现逐个出现的效果，就要单独给每⼀个p标签加上延时，给第⼀个p标签加延时，每个P标签的延时长短不同就决定了他们是先后进⼊页⾯的*/
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;/*当⿏标放在图⽚上0.05秒以后开始向右移动进⼊页⾯*/
}</p> <p>/*为了实现逐个出现的效果，就要单独给每⼀个p标签加上延时，给第⼆个p标签加延时*/
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;/*当⿏标放在图⽚上0.10秒以后开始向右移动进⼊页⾯*/
}</p> <p>/*为了实现逐个出现的效果，就要单独给每⼀个p标签加上延时，给第三个p标签加延时*/
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;/*当⿏标放在图⽚上0.15秒以后开始向右移动进⼊页⾯*/
}</p> <p>/*为了实现逐个出现的效果，就要单独给每⼀个p标签加上延时，给第四个p标签加延时*/
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;/*当⿏标放在图⽚上0.2秒以后开始向右移动进⼊页⾯*/
}
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。