css3动画如何在动作结束时保持该状态不变
来源:互联网 发布:最短域名邮箱 编辑:程序博客网 时间:2024/06/03 07:58
animation-fill-mode : none | forwards | backwards | both;
属性值值 描述
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。
both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
initial 设置该属性为它的默认值。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。
实例(添加下面属性到类名里面)
把物体动画地从一个地方移动到另一个地方,并让它停留在那里:
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div{ width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:2; animation-fill-mode:forwards; /* Safari 和 Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:2; -webkit-animation-fill-mode:forwards;}@keyframes mymove{ from {top:0px;} to {top:200px;}}@-webkit-keyframes mymove /* Safari 和 Chrome */{ from {top:0px;} to {top:200px;}}</style></head><body><p><strong>注意:</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p><div></div></body></html>
0 0
- css3动画如何在动作结束时保持该状态不变
- css3 动画停止的时候如何保持最后一个动作不变
- CAAnimation 如何解决保持动画最后的状态不变
- 如何保持动画结束时的效果?
- ss3 动画停止的时候如何保持最后一个动作不变
- CABasicAnimation 如何解决保持移动后的位置状态不变
- 动画结束时执行某个动作
- 状态模式:把执行的动作封装在跟状态有关的类里,由状态来决定动作该如何执行
- ExtJs 4 store 在分页时如何保持搜索条件不变
- css3 动画结束事件
- 在MOSS域迁移时保持用户权限不变的方法
- 公式编辑,拖拽后如何保持变量不变--$
- jquery结束动画执行其他动作
- 如何让框架网页在1024*768的时候仍保持800*600的大小不变
- 在excel中如何复制公式而保持引用位置不变-相对引用与绝对引用
- word2010如何保持在公式后面键入空格后或添加文字不变小?
- 动画结束后保存状态
- css动画停在结束状态
- Java80商城系统第八节-前端下单、支付以及订单查看
- RS-CMSA中的matlab小知识
- Oracle 两个日期之间的时间间隔
- 根据字符长度返回一定宽度区域的高度
- libhttpd的使用
- css3动画如何在动作结束时保持该状态不变
- H.264视频码流解析
- 正则表达式--温故知新
- caffe特征提取/C++数据格式转换
- WPF-创建超链接文本
- Upgrading Gradle to the latest version on Ubuntu(http://wtanaka.com/node/8079)
- Java80商城系统第九节-前端订单操作后台订单评论管理
- mybatis批量更新(oracle)
- 【干货】机器学习常用 35 大算法盘点(附思维导图)