css动画浅入学习

css动画浅入学习

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。

CSS3动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词​​"from"​​​和​​"to"​​​，等同于​​0%​​​和​​100%​​。

​​0%​​​是动画的开始，​​100%​​是动画的完成。

示例当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

div{ width:100px; height:100px; background:red; animation:myfirst 5s; -webkit-animation:myfirst 5s; /* Safari and Chrome */}@keyframes myfirst{ 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}} @-webkit-keyframes myfirst /* Safari 与 Chrome */{ 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;}}

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

两种写法 挨个属性写：

div{ animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Safari 与 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running;}

简写:

div{ animation: myfirst 5s linear 2s infinite alternate; /* Safari 与 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate;}

平移动画示例

可以在每次 ​​display:bloack;​​ 的时候，都启用动画一次。

下面的动画，就可以实现每次 ​​display​​ 的时候，动画都会从下往上过渡效果。

.anim-down { -webkit-animation-name: down; animation-name: down; -webkit-animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-duration: 0.3s; animation-fill-mode: both;}@-webkit-keyframes down { from { -webkit-transform: translateY(100%); opacity: 0.3; } to { -webkit-transform: translateY(0); opacity: 1; }}@keyframes down { from { transform: translateY(-100%); opacity: 0.3; } to { transform: translateY(0); opacity: 1; }}

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。