css3 - 图标元素动画效果3 - 图标整体在Y轴上移
2017-05-08 18:31
435 查看
在线演示(刚开始打开效果不明显,刷新一下)
初始状态使图标初始位置向下偏移-100%,然后再向上移动到初始位置,在此过程中同时使图标同步变化,由完全透明变化为完全不透明。
html:
css:
解析:
move 关键帧动画名称。
translateY使图标向下偏移。
opacity设置图标透明度。
初始状态使图标初始位置向下偏移-100%,然后再向上移动到初始位置,在此过程中同时使图标同步变化,由完全透明变化为完全不透明。
html:
<div class="box"> <i class="fa fa-home fa-4x"></i> </div> <div class="box"> <i class="fa fa-search fa-4x"></i> </div> <div class="box"> <i class="fa fa-qq fa-4x"></i> </div> <div class="box"> <i class="fa fa-envelope-o fa-4x"></i> </div>
css:
body {background-color: pink;} .box { cursor: pointer; display: inline-block; width: 100px; height: 100px; border-radius: 50%; background-color: #96CEB4; position: relative; margin-right: 20px; -webkit-animation: move 1s; /*使用动画*/ animation: move 1s; } i { color: #FFEEAD; font-size: 48px; position: absolute; top: 16%; left: 20%; } /*定义动画*/ @-webkit-keyframes move { /*兼容性写法。move是关键帧的动画名称*/ from { /*动画起始状态*/ opacity: 0; -webkit-transform: translateY(100%); } to { /*动画结束状态*/ opacity: 1; -webkit-transform: translateY(0%); } } @keyframes move { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0%); } }
解析:
move 关键帧动画名称。
translateY使图标向下偏移。
opacity设置图标透明度。
相关文章推荐
- css3 - 图标元素动画效果1 - 只执行一次动画
- css3 - 图标元素动画效果4 - 动画延迟
- css3 - 图标元素动画效果5 - 弹性动画效果
- css3 - 图标元素动画效果2 - 动画无限循环、循环一定次数、反向动画
- 图标元素动画效果
- 使用CSS3 Translation为社会化图标添加动画效果
- css3 实现一个改变元素属性实现的动画效果
- <html5+css3+js>用javascript显示隐藏,添加,删除元素,css动画效果
- CSS3使用AnimationEnd为同一个元素添加多个动画效果
- css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
- css3 - 按钮元素动画效果
- css3动画与动效--按钮元素动画效果
- Html+CSS3技术实现动画、天气图标动态效果 效果很酷
- CSS3中Animation为同一个元素添加多个动画效果
- 酷炫的css3图标loading动画效果代码
- CSS3的过渡效果(transition)与动画(animation)
- css3 3D动画效果
- css3元素简单的闪烁效果实现(html5 jquery)
- (转)纯CSS3画出小黄人并实现动画效果