CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下!
浏览器支持:
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性;
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
定义和用法
animation 属性是一个简写属性,用于设置六个动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
语法
animation: name duration timing-function delay iteration-count direction;
值 | 描述 |
---|---|
animation-name |
规定需要绑定到选择器的 keyframe 名称。。
animation-name: keyframename|none; |
animation-duration |
规定完成动画所花费的时间,以秒或毫秒计。 animation-duration: time; |
animation-timing-function |
规定动画的速度曲线。
animation-timing-function: value; |
animation-delay |
规定在动画开始之前的延迟。 animation-delay: time; |
animation-iteration-count |
规定动画应该播放的次数。
animation-iteration-count: n|infinite(无限次); |
animation-direction |
规定是否应该轮流反向播放动画。
animation-direction: normal(正常)|alternate(轮流反向播放); |
其中
animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
案例:
很实际的,一个箭头循环上下跳动
#auto{
-webkit-animation:dd 1s infinite;
animation:dd 1s infinite;
}
@keyframes dd{
0% {transform:translate(0, 10px)}
50% {transform:translate(0, 0)}
100% {transform:translate(0, 10px)}
}
@-webkit-keyframes dd{
0% {-webkit-transform:translate(0, 10px)}
50% {-webkit-transform:translate(0, 0)}
100% {-webkit-transform:translate(0, 10px)}
}
注释:animation 这个属性的使用必须结合@keyframes一起使用
百分比的意思就是duration的百分比,如果没有设置duration的话,则表示为无穷大。
transform:translate():含义--变动,位移;也是CSS3里面的新属性。
转载于:https://www.cnblogs.com/Gwen-hui/p/4371915.html
CSS3学习之 animation 属性相关推荐
- css动画定义,css3的动画(animation)属性的详解(附代码)
本篇文章给大家带来的内容是关于css3的动画(animation)属性的详解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. css3动画(animation)具有以下属性: ...
- CSS3中的animation属性实现无限循环的无缝滚动
在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢 有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个 ...
- 微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- CSS3 动画 animation属性
@keyframes只是用来声明一个动画,而动画本身并不执行任何操作.因此,如果希望为某个元素应用动画,还需要把动画与该元素关联起来. 如果一个动画没有与任何元素关联,它就不会被调用,也就不会产生动画 ...
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
- CSS3学习(五):display 属性
CSS3学习(五):display 属性 display 属性是用于控制布局的最重要的 CSS 属性. display 属性 display 属性规定是否/如何显示元素. 每个 HTML 元素都有一个 ...
- CSS3 animation属性运用—雪碧图
一.雪碧图 指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动. 二.animation属性 1. 语法: animation: name duration ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
最新文章
- 前沿分享|阿里云资深技术专家 魏闯先:AnalyticDB PostgreSQL年度新版本发布
- LeetCode 算法 856. 括号的分数
- 如何看待雅虎套现760亿美元从阿里巴巴退出?
- (转)VS2010 快捷键
- 12种方法返回2个文件路径之间的公共基路径ExtractBasePath
- resnet系列+mobilenet v2+pytorch代码实现
- getparent_Java文件类字符串getParent()方法(带示例)
- Javascript中的条件语句和循环语句
- Modelsim下载安装【Verilog】
- 单片机c语言论文,c语言数据小论文_c语言论文课题单片机_精通c语言
- 【英语阅读】纽约时报 | 感染新冠病毒是怎样的感受
- TCP 之 SYN_SENT状态
- OpenFOAM+petsc
- 我们数学中常用的自然常数e代表什么?看完长知识了!
- Vue中使用pdfJs预览PDF、图片
- appium java常用函数_AppiumLibrary常用关键字
- 2017年中国程序员调查分析:大数据就业前景广阔
- ## matplotlib.pyplot库的知识点之bar函数——绘制条形图
- Python 小试牛刀
- Windows10远程桌面无法复制粘贴问题
热门文章
- 20150309+Linux+LAMP安装-02
- 理解sqlalchemy与ORM
- C#将照片或图片转化为byte[]存入数据库,从数据库中读照片
- NCEMASLG-32G的说明
- 9.13-15 runlevel init service
- mysql主从复制思考_Mysql主从复制(拓展博客文章分享及思考)
- git迁移MySQL数据库_Centos7下Gitlab迁移数据库mysql过程
- 如何查看eas源代码_MT5CTP扩展:MT4源代码(EA)适配器来了
- oracle不开归档对效率会快吗,关于性能:存档庞大的数据库(oracle),而不会影响向其插入记录的进程...
- hihocoder#1041 : 国庆出游(DFS)