animation
web前端-css教程
css3中animation动画共有六个属性分别是动画名称，完成动画所需时间，速度，延迟，播放速度以及是否有反向播放，本篇文章将和大家详细分享有关css3中animation动画属性的方法，有一定的参考价值，希望对大家有所帮助。订餐系统免费源码,vscode中的符号,Ubuntu编程w,tomcat取消目录路径,sqlite数据库数量级,爬虫反爬虫手段,php函数传参,西湖区seo商家,暴走漫画网站源码,joomla 新闻门户 模板lzw
CSS主要是用于描绘网页的样式和布局而CSS3 是最新的 CSS 标准，提供了更多的方法而且使用CSS3，可以创建动画，使网页内容更加丰富今天将和大家分享css3中的动画属性——animation小程序开发平台 源码,Vscode中路径没有提示,ubuntu安装nmon,java中运行tomcat,psn奖杯爬虫,php 响应慢,安阳seo网络推广平台,网站添加微信支付接口,php 开源官网模板lzw
注意在使用过程中浏览器兼容问题cf易语言源码不封号补助,vscode入门手册,安装ubuntu16安装时下载,手机刷tomcat,sqlite适用场景,jquery身份证上传插件,目前的前端框架有哪些,python爬虫基础与实战,php模式 cli,网页seo分析,大气的网站模板,网页竖直tab切换,易企秀手机 创建模板lzw
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持 -webkit-animation 属性
所以在写程序的过程中应考虑到浏览器兼容问题
animation 属性
用于设置六个动画属性：
（1）animation-name：规定动画的名称。
animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中-webkit-animation-name:demo//Safari 和 Chrome
（2）animation-duration：完成动画所花费的时间（以秒和毫秒为单位）
animation-duration：3s；-webkit-animation-duration:3s;
（3）animation-timing-function：动画速度曲线
linear ：以匀速播放
ease ：刚开始动画速度慢然后加快在结束时变慢 （默认）
ease-in ：指动画以低速开始
ease-out ：指动画以低速结束。
ease-in-out ：动画以低速开始和结束
cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中设置想要的值，是从 0 到 1 的数值
animation-timing-function：ease；-webkit-animation-timing-function:ease;
（4）animation-delay：动画开始延迟时间
animation-delay：3s；-webkit-animation-delay:3s;
（5）animation-iteration-count：动画播放的次数
n: 自定义动画播放次数的数值
infinite ：指动画无限次循环播放
animation-iteration-count：4；//循环四次-webkit-animation-iteration-count:infinite;//循环无数次
（6）animation-direction：动画是否轮流反向播放
normal 动画应该正常播放 （默认）
alternate 动画应该轮流反向播放
animation-direction：normal;-webkit-animation-direction:alternate;
让一个小方块按照右下左上的方向进行运动
div{width:100px;height:100px;background:red;position:relative;animation:demo;animation-iteration-count：infinite;animation-duration:2s;animation-timing-function:ease;animation-delay:0.1s;animation-direction: alternate; ｝/* Safari and Chrome 浏览器*/-webkit-animation:demo;/*设置动画名称*/-webkit-animation-iteration-count：infinite;/*动画执行次数*/-webkit-animation-duration:5s;/*动画花费时间*/-webkit-animation-timing-function:ease;/*动画速度*/-webkit-animation-delay:2s;/*动画延迟*/-webkit-animation-direction: alternate; /*动画是否反向*/}/*设置动画运行区域*/@keyframes demo{ 0% {background-color: pink;left:0;top:40px;} 25%{background-color: hotpink;left:300px;top:40px;} 50%{background-color: yellow;left:300px;top:340px;} 75%{background-color: blue;left:0;top:340px;} 100%{background-color: green;left:0;top:30px;}}/*Safari and Chrome浏览器*/@-webkit-keyframes demo{ 0% {background-color: pink;left:0;top:40px;} 25%{background-color: hotpink;left:300px;top:40px;} 50%{background-color: yellow;left:300px;top:340px;} 75%{background-color: blue;left:0;top:340px;} 100%{background-color: green;left:0;top:30px;}}效果图：
总结：