【CSS基础 】动画animation
来源:互联网 发布:搞笑网络段子精选 编辑:程序博客网 时间:2024/03/29 21:46
作为博主简单记录: 深入学习请查看文末参考资料
前面有提到过过渡效果css transition,实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的,而且过渡中我们可能需要其他精细操作办不到,这个时候我们需要用到animation了。
举个简单的例子:
<!DOCTYPE html><html><head><style> @keyframes changeColor { from {background-color:lightseagreen} to {background-color:indianred}}div.color-change-target { background-color: lightseagreen; width:50px; height: 50px; border-radius: 25px; animation: changeColor 5s ease-in-out 2s infinite ; margin: 10px auto;}div.color-change-target2 { background-color: lightseagreen; width:50px; height: 50px; border-radius: 25px; /*animation: changeColor 5s ease-in-out 2s 1 ;*/ margin: 10px auto;}div.color-change-target2:hover { background-color:indianred; transition: background-color 5s}</style></head><body><div class="anitation"> <div class="color-change-target"></div> <div class="color-change-target2"></div></div></body></html>
请尝试上面的代码,你会发现 hover 到第二个类名为color-change-target2 的div上的时候 背景颜色的变化 和第一个div 在页面载入2s之后的背景颜色变化一模一样。
好的我们直接根据上面的代码来,@keyframes 关键字,这个关键字可以定义在这个过渡转换中 从0-100 【这里0是转换开始,100是转换结束】 这个过程中 每一步的变化。实际上上面定义changeColor的代码可以写成这样,他们是等价的:
@keyframes changeColor { 0% {background-color:lightseagreen} 100% {background-color:indianred}}
我们进一步修改代码:
@keyframes changeColor { 0% {background-color:lightseagreen} 50% {background-color:indianred; border-radius: 0} 100% {background-color:lightseagreen;border-radius: 25px}}
刷新页面你会看到,在变化的这5s内 在第2.5s时,圆角不在变成了矩形,并且背景颜色变成了红色。
当然你在定义的时候,完全可以设定1% 2% 3%…..并且设定不同属性组合。当然这里面的css属性 和 transition支持的属性是一模一样,也就是说这些属性(传送门)被设定才会有动画效果。 MDN 参考
animation 和 transition一样是一些列属性的简写形式.
你可以加上试试这个效果:
.circle { width: 30px; height: 30px; border-radius: 30px; background-color:aquamarine; margin-bottom: 30px; margin-left: 30px; animation: scaling 1s infinite ease-in-out; } @keyframes scaling{ 0%{ opacity:0.3; transform: scale(1,1); box-shadow: 0px 0px 0px mediumseagreen; } 100%{ opacity:1; transform: scale(1.2,1.2); box-shadow: 0px 0px 10px mediumseagreen; } }
深入学习请狠狠的点击这个:
大漠老师 CSS3 animation
w3c animation
MDN animtaion
0 0
- 【CSS基础 】动画animation
- css 动画(Animation)
- animation css动画
- css动画之animation
- css animation动画
- Css的Animation动画
- css 动画animation
- IOS Animation动画基础
- Android Animation基础动画
- Android animation基础动画
- css 动画 transition及animation
- CSS 动画详解 animation transmation
- CSS 动画:animation和transition
- css动画, css animation, transition, requestanimationframe
- android Animation动画效果基础
- 动画效果编程基础--Animation
- IOS 基础动画Core Animation
- Android-Animation动画基础复习
- SpringMVC入门(一)
- iOS开发归档存储
- fitsSystemWindows实践
- 应用8255A控制LED小灯开闭(附代码注释)
- 共享经济向共产经济转变
- 【CSS基础 】动画animation
- GPU虚拟化的评价标准与实现策略
- android多渠道打包&&几个打包小技巧
- 如何在软件开发过程中合理的设计函数来解决实际问题
- 使用SecureCRT软件在客户端与服务器之间进行文件传输(不能传输文件夹)
- 消除文法左递归-编译原理
- Zookeeper概念 & 数据结构
- 对极几何原理
- 关于Const及强制转换