css 平移到某个位置_CSS3平移动画效果

在这篇文章中主要是讲如何通过CSS3实现平移动画效果，在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述。

一、transition-property：是用来指定当元素其中一个属性改变时执行transition效果(例如：长度，宽度，颜色等)。

二、transition-duration：是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬)。

三、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率(例如：先快后慢，先慢后快，匀速变化等等)。

四、transition-delay：是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果。

先来三张效果图，由于是一个动态的过程，这里只发三张动态瞬间图片：

图片左侧的文字还没有进入

图片上的四行文字正在逐条进入

图片上四行文字完成动画效果

HTML5全部代码：

邓福如

《如果有如果》

《前面路口停》

《邓大福是一只猫》

《Nothing On You》

CSS3样式代码：

/*清原有的默认样式*/

body,figure,figcaption,h2,h3,p{

margin: 0;

padding: 0;

}

/*设置图片样式*/

.test1-img{

width: 50%;

height:10%;

overflow: hidden;

margin-left:250px;

}

figure{

position: relative;

overflow: hidden;/*使用overflow属性设置成hidden，图片超出容器的部分就会自动隐藏*/

width: 100%;

float: left;

}

figcaption{

position: absolute;

top:0;

left: 0;

}

.test1{

background-color: #2F0000;

}

.test1 figcaption {

margin: 20px;

}

/*对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;

}

/*给figure下面的所有的p标签加上动画延时效果*/

figure figcaption p{

transition: transform 0.35s;

}

/*将test1里面的文字内容移出页面*/

.test1 figcaption p{

transform: translate(-400px,0px);

}

/*当鼠标滑过外部容器figure的时候改变p标签和h2标签的位置*/

.test1:hover figcaption p{

transform: translate(0px,0px);

}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第一个p标签加延时，每个P标签的延时长短不同就决定了他们是先后进入页面的*/

.test1 figcaption p:nth-of-type(1){

transition-delay: 0.05s;/*当鼠标放在图片上0.05秒以后开始向右移动进入页面*/

}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第二个p标签加延时*/

.test1 figcaption p:nth-of-type(2){

transition-delay: 0.10s;/*当鼠标放在图片上0.10秒以后开始向右移动进入页面*/

}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第三个p标签加延时*/

.test1 figcaption p:nth-of-type(3){

transition-delay: 0.15s;/*当鼠标放在图片上0.15秒以后开始向右移动进入页面*/

}

/*为了实现逐个出现的效果，就要单独给每一个p标签加上延时,给第四个p标签加延时*/

.test1 figcaption p:nth-of-type(4){

transition-delay: 0.2s;/*当鼠标放在图片上0.2秒以后开始向右移动进入页面*/

}