css平移到某个位置_CSS3平移动画效果
在这篇⽂章中主要是讲如何通过CSS3实现平移动画效果，在开始之前先给⼤家介绍⼀下与平移动画有关的CSS3属性以及相关的属性描述。
⼀、transition-property：是⽤来指定当元素其中⼀个属性改变时执⾏transition效果(例如：长度，宽度，颜⾊等)。
⼆、transition-duration：是⽤来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很⽣硬)。
三、transition-timing-function：允许元素根据时间的推进去改变属性值的变换速率(例如：先快后慢，先慢后快，匀速变化等等)。
四、transition-delay：是⽤来指定⼀个动画开始执⾏的时间，也就是说当改变元素属性值后多长时间开始执⾏transition效果。
先来三张效果图，由于是⼀个动态的过程，这⾥只发三张动态瞬间图⽚：
图⽚左侧的⽂字还没有进⼊
图⽚上的四⾏⽂字正在逐条进⼊
图⽚上四⾏⽂字完成动画效果
HTML5全部代码：
index
《如果有如果》
《前⾯路⼝停》
《邓⼤福是⼀只猫》
《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;css特效文字
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秒以后开始向右移动进⼊页⾯*/
}

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