css transition animation
transition
支持:IE10+
img{transition: 1s 1s height ease; }
transition-property: 属性
transition-duration: 持续时间
transition-delay: 延迟
transition-timing-function: 变化函数
- linear cubic-bezier(0,0,1,1)
- ease cubic-bezier(0.25,0.1,0.25,1)
- ease-in cubic-bezier(0.42,0,1,1)
- ease-out cubic-bezier(0,0,0.58,1)
- ease-in-out cubic-bezier(0.42,0,0.58,1)
- cubic-bezier(n,n,n,n) 自定义贝塞尔函数
无效的属性:display,background: url(foo.jpg)
不能重复执行,除非重复触发事件
animation
支持:IE10+
div:hover { animation: 1s 1s rainbow linear 3 forwards normal;}@keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; }}
animation-name: 对应keyframes的名称
animation-duration:持续时间
animation-timing-function:变化函数
- linear cubic-bezier(0,0,1,1)
- ease cubic-bezier(0.25,0.1,0.25,1)
- ease-in cubic-bezier(0.42,0,1,1)
- ease-out cubic-bezier(0,0,0.58,1)
- ease-in-out cubic-bezier(0.42,0,0.58,1)
- cubic-bezier(n,n,n,n) 自定义贝塞尔函数
- step函数
- 步幅:大于零的整数
- 对齐:指定step函数是左对齐连续函数,还是右对齐连续函数。
start:对齐开始,第一帧发生在动画开始时,end:对齐结束,最后一帧发生在动画结束时。可选项。
一个step函数的例子: http://dabblet.com/gist/1745856
div:hover {animation: 1s rainbow infinite steps(10); }
animation-delay:延迟
animation-iteration-count:执行次数
animation-fill-mode:填充模式。决定一次动画播放完成之后是回到起始状态还是停留在结束状态
- none 回到最初的状态
- forwards 表示动画结束后,元素就是当前动画结束时候的状态。对应keyframe中的"to"或"100%"帧。
- backwards 表示动画开始之前,元素处于keyframe是"from"或"0%"关键帧的状态。
- both
animation-direction:执行方向
- normal 0->1, 0->1, 0->1 正常播放
- alternate 0->1, 1->0, 0->1 正常播放,倒带播放
- reverse 1->0, 1->0, 1->0 倒带播放
- alternate-reverse 1->0, 0->1, 1->0 倒带播放,正常播放
animation-play-state:播放状态,可以用js控制
- paused 动画暂停
- running 动画播放中
keyframes中,from=0%,to=100%
转载于:https://www.cnblogs.com/tjyuanpeng/p/3568747.html
css transition animation相关推荐
- [css] transition、animation、transform三者有什么区别?
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
- css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法
到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic- ...
- CSS transition 的默认值
语法 transition: property duration timing-function delay|initial|inherit; 示例: div {width: 100px;height ...
- 利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- css 旋转 animation动画
css 旋转 animation动画 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- 用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
- html中定义动画anima,css中animation怎么用
css中animation怎么用 animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,可以让很多其它CSS属性产生动画效果,比如color, background-co ...
- CSS transition(过渡效果)详解
CSS transition(过渡效果)详解 通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
最新文章
- 难死金庸的考题(高中难度)
- 连接多个oracle数据库的配置,oracle数据库连接配置文件
- Linux服务器性能分析
- OpenCV C++ 常用功能
- 一个简单的获取时间的程序
- 后台推送消息给app_uni-app 消息推送
- html的canvas代码,HTML
- 计算机视觉行业,这_体育行业中计算机视觉的用例
- 第6节 Kali Linux系统压缩与解压缩文件
- 今天发布《看图玩儿》看图软件
- 品牌 read.php,优网科技高级程序员关于PHP优化知识分享
- 看的见的算法——三门问题
- Bezier曲线原理及实现代码(c++)
- vue中的表单数据提交
- c++ mfc实现中英文菜单的动态切换
- SpringBoot 解析excel 使用easyexcel依赖 2.1.1版本
- TIA博途SCL入门学习(二)常用基本控制语句用法和举例
- 【语音识别】动态时间规整算法(RTW)语音识别系统【含GUI Matlab源码 341期】
- 华为watch gt2能升鸿蒙系统吗,华为Watch GT2 Pro发布倒计时,或是首款鸿蒙系统手表?...
- 计算机比赛学校推荐意见,最新学校推荐意见
热门文章
- ucos中的三种临界区管理机制
- 记录之关于tensoflow中使用Adam优化算法导致模型保存时参数的变化的记录
- C++:Static修饰变量 vs Static修饰函数
- Leetcode题库217.存在重复元素(python实现)
- 5G NR Operating bands and channel bandwidth
- Eclipse中DTD验证导致无法进行代码提示的问题 .
- yum是什么?(linux命令) .
- 【最新】docker 安装elasticsearch + kibana步骤【第二篇_kibana】
- php-5.6.26源代码 - opcode处理器,“函数调用opcode”处理器,如何调用扩展模块的函数...
- Alltesting众测平台访谈录第一弹!