搞定css3的动画(一)
来源:互联网 发布:势不可挡网络剧 编辑:程序博客网 时间:2024/06/11 08:56
在html5中,改变是相当大的,尤其是动画了。咱这里只说动画,不说其他元素。
只谈风月,不谈政治。只为帮组学习css动画。
对前端开发来说,CSS动画最令人激动的事情之一是,我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS,您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够,这是一个非常大的加分!无论你只是添加一点点引人注目的设计细节,还是添加非常多的动画,都没有问题。
CSS的transitions
属性。我们重点讲CSS动画规范
。
本文会给你足够的CSS动画入门的内容,足以让你变得更有创造力!
1. @keyframes 定义执行动画
// 这里是写动画定义,这里的[driver]就是动画名称@keyframes drive { //do somthing...}
在这里就是动画的执行代码,俗话说就是动画开始
到动画结束
、还有就是动画执行过程中
的情况了。
看到这里,此时此刻你是否有点想法来代替这种情况。没错就是From
和To
也可表示动画开始到动画结束。
@keyframes drive { from { transform: translateX(0);} to { transform: translateX(400px);}}
在大多时候这种情况是不能满足我们的需求的,最合适就是用百分比来使用,0%
和100%
这样的使用更合适。
于是乎
@keyframes drive { 0% {transform: translateX(0);} 100% {transform: translateX(400px);}}
如果你乐意还可以多写几个在过程中的比例地址。就看你需求了。这有很大的灵活性可以给关键帧分组,以便以后再查看。
2. 给HTML元素赋值动画animation-name
第一个属性是animation-name,给关键帧动画说明的动画名称
animation-name: GuDian;
第二个属性是animation-duration
,给关键帧动画设置动画执行时间
animation-duration: 1s;
第三个属性是animation-timing-function
,给关键帧动画设置动画展现形式,默认为:ease
1. ease-in2. ease-out3. ease-in-outanimation-timing-function: linear;
第三个属性是animation-iteration-count
,给关键帧动画设置重复次数:默认为:1
infinite:定义为一直执行
animation-iteration-count: 1;
第三个属性是animation-fill-mode
,给关键帧动画设置最后停留位置,默认为:none
- forwards
- backwards
animation-fill-mode: both;
3. 创建X轴平移动画
NOTICE:
我们在给html元素赋值给的name
要记住他的名字,然后开始用@-webkit-keyframes
写动画动容
这里我们设置了他的X轴移动的位置,@-webkit-keyframes TransDVD { 0%{transform: translateX(0);} 50%{transform: translateX(20px); } 100%{transform: translateX(300px);} }
起始点
,中点
,和终点
分别到的位置点。这里的动画名字是TransDVD
。4. 创建
缩放
动画@-webkit-keyframes TransDVD { 0%{transform: scale(0);} 100%{transform: scale(1);} }
5. 创建旋转
动画
@-webkit-keyframes TransDVD { 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }
5. 创建组合动画
-边旋转和边缩放
@-webkit-keyframes TransDVD{ 0%{transform: rotate(0deg) scale(0.1);} 100%{transform: rotate(360deg) scale(1);} }
NOTICE:
申明动画我们可以用一个简单的方式
animation: TransDVD 1s ease-out 0s infinite backwards;参数说明 `动画名称` `执行时间` `执行方式` `动画延迟时间` `动画重复次数` `最后停留位置`
我的html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css动画</title> <style> .car { background: #000000; width: 100px; height: 100px; animation-name: drive; animation-duration: 2s; /*动画执行速度*/ animation-timing-function:linear; /*重复次数*/ animation-iteration-count: infinite; /*最后停留位置默认为none*/ animation-fill-mode: backwards; } @-webkit-keyframes drive { 0%{transform: translateX(0);} 50%{transform: translateX(20px); } 100%{transform: translateX(300px);} /*0% { transform: translateX(0px) scale(1); } 100% { transform: translateX(200px) scale(1); }*/ } /*鼓点*/ .gudian { width: 10vw; height: 10vw; border:100px solid green; border-left-color:red; border-right-color: black; border-top-color: yellow; border-radius: 50%; left: 0; right: 0; margin: auto; /*动画执行*/ animation-name: GuDian; animation-duration: 1s; /*动画执行速度*/ animation-timing-function: linear; /*重复次数*/ animation-iteration-count: infinite; } @-webkit-keyframes GuDian { /*0%{transform: rotate(0deg);}*/ /*100%{transform: rotate(360deg);}*/ 0%{transform: scale(0);} 100%{transform: scale(1);} } .gudian: Before { background: #000000; content: " "; border-color: #fff000; } /*灯笼*/ .DVD { width: 10vw; height: 10vw; border:100px solid #000000; border-radius: 50%; border-left-color: blue; border-right-color: yellow; /*动画*/ /*animation-name: TransDVD;*/ /*animation-timing-function: linear;*/ /*animation-duration: 1s;*/ /*旋转方向 reverse(正) alternate(反)*/ /*animation-direction: reverse;*/ /*animation-iteration-count: infinite;*/ animation: TransDVD 1s ease-out 0s infinite backwards; } @-webkit-keyframes TransDVD{ 0%{transform: rotate(0deg) scale(0.1);} 100%{transform: rotate(360deg) scale(1);} }.music { width: 174px; height: 174px; position: absolute; left: 400px; animation-name: plays,playsUp; animation-duration: 1s,0.75s; animation-delay: 0s, 1s; animation-timing-function: ease-in,linear; animation-iteration-count: infinite; animation-fill-mode: backwards; border-radius: 50%; border: 50px solid green; border-left-color: blue; border-right-color: yellow;}@-webkit-keyframes plays{ 0%{transform: translateX(-200px) rotate(0deg);} 100%{transform: translateX(0px) rotate(360deg);}}@-webkit-keyframes playsUp{ 0% { transform: scale(1); animation-timing-function: ease-in; } 25% { transform: scale(1.15); animation-timing-function: ease-out; } 60% { transform: scale(0.9); animation-timing-function: ease-in; } 100% {transform: scale(1);}} </style></head><body> <div class="car"></div> <div class="gudian"></div> <div class="DVD"></div> <div class="music"></div></body></html>
如有问题可添加我的QQ:1290925041
还可添加QQ群:234812704(洲洲哥学院)
欢迎各位一块学习,提高逼格!
更多消息
更多信iOS开发信息 请以关注洲洲哥 的微信公众号,不定期有干货推送:
- 搞定css3的动画(一)
- stylie工具轻松搞定css3抛物线动画
- CSS3动画效果一
- iOS一分钟搞定加入购物车的交互动画
- iOS 一分钟搞定加入购物车的交互动画
- iOS 一分钟搞定加入购物车的交互动画
- css3 动画系列(一)
- css3的animation 动画
- css3的动画animation
- css3的动画效果
- css3动画的"消失"””
- 好玩的css3动画
- Css3的动画应用
- CSS3的动画效果
- css3的动画特效
- iOS一分钟搞定加入购物车的交互动画【转】
- css3动画学习笔记(一)
- css3 动画停留在最后一帧
- angular 更改显示与绑定数据格式转换
- JVM总结-体系结构
- linux 安装 jdk maven svn
- 深入Spring:自定义注解加载和使用
- 微信公众号监控返回按钮
- 搞定css3的动画(一)
- 关于PHOG特征
- hex6x.exe的使用
- 在一个Activity中两个llistView共存的问题
- 一篇博客让你了解RxJava
- centos7下mysql安装
- ios - loadView与viewDidload
- git跟踪分支
- 批处理学习