css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效果；

在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。

animation

animation作为一个复合属性，包括了以下动画属性。

  • animation-name -------------------------------------规定动画名称

  • animation-duration ---------------------------------规定动画完成一次的时间

  • animation-timing-function  ----------------------规定动画的运动速度曲线

  • animation-delay  ------------------------------------规定动画的延迟时间

  • animation-iteration-count  -----------------------规定动画的播放次数

  • animation-direction   ------------------------------规定动画下一周期是否逆向开始

  • animation-fill-mode  -------------------------------规定动画时间之外的状态

  • animation-play-state  ------------------------------规定动画的运行和暂停

animation-timing-function

规定动画的速度曲线。默认是 "ease"。常用的运动速度曲线还有以下几种：

  • linear：线性过渡。
  • ease-in：由慢到快。
  • ease-out：由快到慢。
  • ease-in-out：由慢到快再到慢。

也可以直接使用贝塞尔曲线规定运行的速度曲线，贝塞尔曲线的4个数值需在[0, 1]区间内。

animation-direction

规定动画是否在下一周期逆向播放。默认是 "normal"。

  • reverse:反方向运动
  • alternate:先正常方向再反方向运动，持续交替
  • alternate-reverse:先反方向再正常方向运动，持续交替

animation-fill-mode

规定对象动画时间之外的状态。常用值如下：

  • none:默认值
  • forwards:设置对象状态为动画结束时的状态
  • backwards:设置对象状态为动画开始时的状态

圆形运动轨迹

实现代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>沿圆形轨迹运动</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         html,body{
  12.             height: 100%;
  13.         }
  14.         #trajectory {
  15.             width: 300px;
  16.             height: 300px;
  17.             border: 4px solid #949494;
  18.             border-radius: 50%;
  19.             position: relative;
  20.             left: calc(50% - 153px);
  21.             top:calc(50% - 153px);
  22.         }
  23.         @keyframes moveX{
  24.             0% {left: -22px;}
  25.             100% {left: 282px;}
  26.         }
  27.         @keyframes moveY{
  28.             0% {top: -22px;}
  29.             100% {top: 282px;}
  30.         }
  31.         #move {
  32.             width: 40px;
  33.             height: 40px;
  34.             font-size: 12px;
  35.             background-color: #32c33a;
  36.             border-radius: 50%;
  37.             position: absolute;
  38.             left:-22px;
  39.             top:-22px;
  40.             animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="trajectory">
  46.         <div id="move">Immortal brother</div>
  47.     </div>
  48. </body>
  49. </html>

以上代码的注意点如下：

  • 对body高度100%的设置原因在于html5环境下body的默认高度为0
  • calc在使用过程中，值与值之间的“-”和“+”两端的空格必不可少
  • 动画当中的left和top值为物体运动的起始位置和结束位置，要注意border值
  • 动画一次执行的运动轨迹仅为一半
  • 速度曲线：cubic-bezier(0.36,0,0.64,1)；
  • 两个方向的延迟时间的设置 X：-2s;Y : 0s
  • 先正方向再反方向持续交替运行 ：alternate

css3动画之圆形运动轨迹的更多相关文章

  1. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  2. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  3. css3 动画 总结

    原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐.当初的这个动画,是同事自己写的,我看到的时候以为是他在上面 ...

  4. CSS3动画那么强，requestAnimationFrame还有毛线用？

    一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...

  5. CSS3动画那么强，requestAnimationFrame还有毛线用--摘抄

    CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...

  6. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  7. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  8. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  9. 学习CSS3动画（animation）

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

随机推荐

  1. 修改eclipse中的propersties文件的默认编码格式

    最近遇到每次新建工程里无论在总得工程设置了utf-8还是刚刚建立的空间设置都没有效果, 原来properties文件的设置要单独弄,如下图所示

  2. 怎么在docker容器的mysql的编码格式变为utf8

    第一个方法: 1.  编辑MySql的配置文件 MySql的配置文件Windows下一般在系统目录下或者在MySql的安装目录下名字叫my.ini,可以搜索,Linux下一般是/etc/my.cnf ...

  3. caffe 逐步调试

    caffe 逐步调试 https://www.zhihu.com/question/27982282

  4. Swiper 滑动切换图片（可用于PC端，移动端）

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...

  5. linux cpu内存利用率获取

    有了这么好的工具,我们还需要自己造轮子么? 两种情况,如果有复杂的监控需求,而且愿意花时间学习,我们可以使用nmon:但如果监控需求特殊比如说还要监控单个进程的情况,这时候就需要自己动手实现了.自己动 ...

  6. [hiho1586]Minimum

    题意:区间内乘积最小值,带修改.解题关键:线段树裸题,考场上以为x y必须不等,还维护了次小值,尼玛嗨尼玛嗨,划水一整场,心态爆炸. 注意坐标需要+1 #include<cstdio> # ...

  7. 21.运行Consent Page

    服务端把这个地方修改为true,需要设置 运行测试.服务端和客户端都运行起来 我们使用的用户是在这里配置的 服务端修改ConsentController 再次运行,但是页面都是乱码 openId和pr ...

  8. matlab新手入门（二）（翻译）

    矩阵和数组 MATLAB是“矩阵实验室”的缩写.虽然其他编程语言大多数一次使用数字,但MATLAB®主要用于整个矩阵和数组.所有MATLAB变量都是多维数组,无论数据类型如何.矩阵是通常用于线性代数的 ...

  9. 分类---Logistic Regression

    一 概述 Logistic Regression的三个步骤 现在对为什么不使用均方误差进行分析(步骤二的) 由上图可以看出,当距离目标很远时,均方误差移动速率也很慢,不容易得到好的结果. Discri ...

  10. 理解SPI

    SPI 全称为 Service Provider Interface,是一种服务发现机制.SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时, ...