学习animation、transition、transform和@keyframes的使用
当我们需要给页面添加动画效果时,需要用到CSS3的animation样式属性;
例如:
animation: test 2s infinite;
其中test是动画的名称,2s是动画的时长,infinite是动画重复进行播放。
那么这个test动画要怎么设置呢?接下来我们要用到@keyframes规则;
例如:
@keyframes test{
0% {transform:rotate(0deg); left:0px;}
50% {transform:rotate(30deg); left:0px;}
100% {transform:rotate(80deg); left:0px;}
}
其中0%表示动画的开始,100%表示动画的结束,后面{}中写入动画需要执行的样式属性;
那么50%表示动画运行到一半时需要执行的样式属性,您也可以增加一些百分比,例如:25%的时候需要执行的样式。
当我们需要给页面添加过渡效果时,需要用到CSS3的transition样式属性;
例如:
transition:all 2s ease 2s;
其中all表示所有属性都将获得过渡效果,2s表示过渡效果持续2秒钟时间,ease表示切换效果的速度,2s表示等待2秒后开始切换效果。
当我们需要给HTML元素添加2D或3D转换时,需要用到CSS3的transform的样式属性;
例如:
transform:rotate(180deg);
其中rotate表示进行2D旋转,180deg表示旋转180度。
学习animation、transition、transform和@keyframes的使用的更多相关文章
- animation transition transform
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...
- animation,transition,transform小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS的Animation&Transition&gradients属性
㈠Animation&Transition&gradients 代码示例 圆形,渐变颜色,旋转,当鼠标放在圆上,圆旋转变大 <!DOCTYPE html> <html ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- 用C3中的animation和transform写的一个模仿加载的时动画效果
用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...
- CSS3 Animation & linear-gradient & css3 var & @keyframes
CSS3 Animation & linear-gradient & css3 var & @keyframes https://www.zhangxinxu.com/word ...
随机推荐
- mysql的配置说明
查询最高内存占用 使用以下命令可以知道mysql的配置使用多少 RAM SELECT ( @@key_buffer_size + @@query_cache_size + @@innodb_buffe ...
- Redis数据结构之robj
本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...
- ssl证书专题(3):创建CA和申请证书
请看: https://www.cnblogs.com/mingzhang/p/8949541.html
- C# 错误集锦
①字段重复 js → qs 仔细 ② 代码臃肿 通过判断 资产类型zc_type来判断模块的显隐 实际在其中嵌入 <%=zc_type == "2"?"" ...
- Django实例
更新:今年8月在深圳和嵩天老师居然见面了,很开心.嵩天老师很和蔼. =========== 今天看了嵩天老师的视频,感觉讲的很好,于是看着视频自己做了一个初步的实例认识. 步骤1,新建一个Web框架 ...
- [模板][题解][Luogu1939]矩阵乘法加速递推(详解)
题目传送门 题目大意:计算数列a的第n项,其中: \[a[1] = a[2] = a[3] = 1\] \[a[i] = a[i-3] + a[i - 1]\] \[(n ≤ 2 \times 10^ ...
- js获取手机信息
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery第一篇
1 jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...
- ECMA Script 6_函数的扩展
ES6规定只要函数参数使用了默认值.解构赋值.或者扩展运算符, 那么函数内部就不能显式设定为严格模式,否则会报错 1. 参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面 函数 ...
- java_基础_异常
之前只是了解的最基础的异常形式,没有过多的深入 今天因为一些原因了解了一下 下面来说说异常的几种形式 1.try-catch语句块 代码示例 class test{ public static voi ...