当我们需要给页面添加动画效果时,需要用到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的使用的更多相关文章

  1. animation transition transform

    animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 div{width:100px;height:100px;background:red;animation:move ...

  2. animation,transition,transform小练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  4. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  5. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  6. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS的Animation&Transition&gradients属性

    ㈠Animation&Transition&gradients 代码示例 圆形,渐变颜色,旋转,当鼠标放在圆上,圆旋转变大 <!DOCTYPE html> <html ...

  8. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  9. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  10. CSS3 Animation & linear-gradient & css3 var & @keyframes

    CSS3 Animation & linear-gradient & css3 var & @keyframes https://www.zhangxinxu.com/word ...

随机推荐

  1. mysql的配置说明

    查询最高内存占用 使用以下命令可以知道mysql的配置使用多少 RAM SELECT ( @@key_buffer_size + @@query_cache_size + @@innodb_buffe ...

  2. Redis数据结构之robj

    本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...

  3. ssl证书专题(3):创建CA和申请证书

    请看:  https://www.cnblogs.com/mingzhang/p/8949541.html

  4. C# 错误集锦

    ①字段重复 js → qs  仔细 ② 代码臃肿 通过判断 资产类型zc_type来判断模块的显隐 实际在其中嵌入 <%=zc_type == "2"?"" ...

  5. Django实例

    更新:今年8月在深圳和嵩天老师居然见面了,很开心.嵩天老师很和蔼. =========== 今天看了嵩天老师的视频,感觉讲的很好,于是看着视频自己做了一个初步的实例认识. 步骤1,新建一个Web框架 ...

  6. [模板][题解][Luogu1939]矩阵乘法加速递推(详解)

    题目传送门 题目大意:计算数列a的第n项,其中: \[a[1] = a[2] = a[3] = 1\] \[a[i] = a[i-3] + a[i - 1]\] \[(n ≤ 2 \times 10^ ...

  7. js获取手机信息

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. jquery第一篇

    1  jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...

  9. ECMA Script 6_函数的扩展

    ES6规定只要函数参数使用了默认值.解构赋值.或者扩展运算符, 那么函数内部就不能显式设定为严格模式,否则会报错 1. 参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面 函数 ...

  10. java_基础_异常

    之前只是了解的最基础的异常形式,没有过多的深入 今天因为一些原因了解了一下 下面来说说异常的几种形式 1.try-catch语句块 代码示例 class test{ public static voi ...