css动画设置运动轨迹,css3动画之圆形运动轨迹
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:设置对象状态为动画开始时的状态
圆形运动轨迹
实现代码如下:
沿圆形轨迹运动
*{margin:0;padding:0;
}html,body{height:100%;
}#trajectory{width:300px;height:300px;border:4px solid #949494;border-radius:50%;position:relative;left:calc(50% - 153px);top:calc(50% - 153px);
}@keyframes moveX{0% {left:-22px;}100%{left:282px;}}
@keyframes moveY{0% {top:-22px;}100%{top:282px;}}
#move{width:40px;height:40px;font-size:12px;background-color:#32c33a;border-radius:50%;position:absolute;left:-22px;top:-22px;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;
}
Immortal brother
css动画设置运动轨迹,css3动画之圆形运动轨迹相关推荐
- CSS入门八、CSS3动画
零.文章目录 文章地址 个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
- html css画小车,基于css3动画实现的旅行的小车
旅行的小车.gif 小丸子.gif 抱歉,用工具生成的gif有点卡,小车的轮子都转不利索了,完整demo可以点击文章最底下的[demo展示中心]. 这两个demo的所有元素和动效都是由html+css ...
- css3动画数字变化,css3动画的更深层次的探究(矩阵变换)
前言 其实无论哪一门技术的发展都有其根源可揪,我之前做了一些css3动画的效果,对css3流畅而又实现简单的动画效果深深着迷,遂决定探究下css3动画的来世今生, 本文如有疏漏,请各位看官及时指出,以 ...
- html如何设置滚动动画,滚动条触发CSS3动画
在这篇教程中,我将为你介绍如何在页面滚动时触发CSS动画.这种效果使用JavaScript和CSS就能做到. Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的 ...
- css3 动画右侧进入,css3动画(从上、左下、左、右进入页面)
/*动画-start*/.animated{animation-duration:1.5s !important;-webkit-animation-duration:1.5s !important; ...
- css阴影设置透明度,css3圆角 阴影 透明度
css3圆角 阴影 透明度 .box{ width: 200px; height: 200px; border: 2px solid #000; background-color: gold; mar ...
- android 动画无缝滚动,CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构:
- CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
- CSS3动画特效详解
大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...
最新文章
- LeetCode简单题之数字转换为十六进制数
- c语言实现将两个文件复制到一个文件里_Python中复制文件的9种方法
- select case语句举例_图解Go select语句原理
- TrackID识别音乐的应用不能用了
- 广度优先搜索算法BFS讲解以及python 实现
- python调用外部程序 退出_Python调用外部程序——os.system()和subprocess.call
- linux安装ralink驱动程序,Linux 安装 FW150UM/RALINK 无线网卡
- prayaya v3-国产神操作系统
- 铁路cj继电器_铁路信号继电器简介
- 新购买的PLQ-20K在Windows系统下打印乱码或不打印。
- 关于 iOS 应用申请 Admob 广告时如何获取商店信息
- 学安全测试需要考什么证书?
- 网站提示HTTP503Service Unavailable的处理办法
- 使用Python+selenium 视频及相关数据
- JSD-2204-API-JavaIO-Day02
- 【错误记录】Android 应用 POST 网络请求报错 ( java.io.IOException: Cleartext HTTP traffic to xxx not permitted )
- log4j与log4j2性能对比及log4j升级至log4j2方案
- 数据结构 Hash,哈希冲突,哈希聚集,BloomFilter,分布式一致性hash
- java动态代理(AOP)
- 数字化时代的新形式下,如何提升客户满意度,实现客户成功?
热门文章
- springboot无法打开 jsp 页面变成下载解决办法
- 数仓知识06:什么是元数据?
- 2020微信小程序学习报告.2.17-3.1.(一)
- python爬取京东商品价格走势_用python编写的抓京东商品价格的爬虫
- mysql is marked_快速解决MySQL:Table xxx is marked as crashed and should be repaired五个办法...
- Python实现图形界面猜数字游戏(GUI)
- 前端工程师为什么会这么值钱?原来真相在这里
- 开始启程, 你的第一行前端代码
- 如何解决“App开发者需要更新此App以在此iOS版本上正常工作”
- rac的FAILOVER 和LOAD_BALANCE参数,yes和on是否通用!