使用CSS3实现的动画效果的示例代码翻译
1。翻译CSS3属性相关的动画及相关属性描述1，过渡属性：用于改变元素变化时的过渡效应，如长度、宽度、颜色等。
2、转换持续时间：它用来指定元素转换过程的持续时间（通过设置元素转换过程的持续时间来达到动态效果，否则效果会非常生硬）。
3，转换定时功能：允许元素根据时间的变化改变属性值的转换率（例如，第一慢、慢优先、快快、匀速等）。
4，转换延迟：它用于指定动画开始执行的时间，也就是说，当元素属性值发生变化时，它开始执行转换效果的时间有多长。
前三个效果图，因为它是一个动态的过程，这里只有三张即时动态图片：
两。效果图
图片左边的文字还没有输入。
图片上的四行文字一个接一个地进入。
图片中的四行文字完成动画效果。
三。示例代码
全部代码：
复制代码代码如下所示：
指数
AFU
如果有
停在前面的十字路口
邓大付是一只猫
你身上什么也没有
CSS3样式代码：
复制代码代码如下所示：
/原始清代的默认风格
体、图、图表题，H2，H3，P {
保证金：0；
填充：0；
}
设置图片样式
test1 img {。
宽度：50%；
身高：10%；
溢出：隐藏；
左：250px保证金；
}
图{
职位：相对；
溢出：隐藏；使用溢出属性设置为隐藏，超出图片部分的容器将自动隐藏。
宽度：100%；
浮点数：左；
}
图表题{
位置：绝对；
顶部：0；
左：0；
}
test1 {。
背景颜色：# 2f0000；
}
test1 {图表题。
保证金：20px；
}
test1 / * FigCaption P标签式设计。
test1 FigCaption p {。
背景颜色：# FFF；
颜色：# 333；
字体：微软雅黑；
字体重量：500；
字母间距：1px；
边距：10px；
文本对齐：中心；
}
对于下面的所有数字，动画标签加延迟效应
图图表题p {
过渡：变换0.35s；
}
test1 / *在文本内容的页面。
test1 FigCaption p {。
变换：平移（- 400px，0px）；
}
当鼠标在容器外部图形上改变p标记和H2标记时
test1：图表题p {盘旋。
变换：平移（0px，0px）；
}
为了达到一个接一个的效果，给每一个p标记延迟到第一个p标签来延迟，每个不同长度的p标签的延迟决定它们连续进入页面。
。test1 FigCaption P：n型（1）{
过渡延迟：0.05s； / *当鼠标在图片上0.05秒后向右移动到页面。
}
为了达到一个接一个的效果，给每个p标签加上延迟，再到第二个p标记来延迟。
。test1 FigCaption P：n型（2）{
过渡延迟：0.10s； / *在0.10秒后图片上的鼠标移动到正确的页面。
}
为了达到一个接一个的效果，给每个p标签加上延迟，到第三个p标记来延迟。
。test1 FigCaption P：n型（3）{
过渡延迟：0.15s； / *当鼠标在图片上0.15秒后向右移动到页面。
}
为了达到一个接一个的效果，给每个p标签加上延迟，到第四个p标记来延迟。
。test1 FigCaption P：n型（4）{
过渡延迟：0.2s； / *当鼠标在图片上0.2秒后向右移动到页面。
}
总结
以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，你可以留言。