首页 > 代码库 > CSS自学笔记（14）:CSS3动画效果

CSS自学笔记（14）:CSS3动画效果

2024-07-18 22:23:19   225人阅读

在CSS3中也新增了一些能够对元素创建动画处理的属性。通过这些新增的属性，我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果，我们就可以取代网页中的动态图片、flash动画和JavaScript了。

CSS3中新增的动画效果的属性以及主流浏览器支持情况

属性浏览器支持
transition IE Firefox Chrome Safari(-webkit-) Opera
@keyframes IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera
animation IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera

注：

  • IE9以及更早版本不支持这三个新增属性。
  • 在Safari浏览器中，需要加(-webkit-)前缀。
  • 在Chrome浏览器中，@keyframes和animation属性需要加(-webkit-)前缀。

transition属性

属性描述默认值
transition 简写，用于在一个属性中设置四个过渡属性。 无
transition-property 定义过渡效果的 CSS 属性的名称。 无
transition-duration 定义过渡效果所用时间。 0
transition-timing-function 定义过渡效果的时间曲线。 ease
transition-delay 定义过渡效果开始时间。 0

下面是一个简单的CSS样式

img {    width: 90px;    height: 90px;    transition-property: width, height, transform;    transition-duration: 1s, 1s, 1s;    transition-timing-function: ease-in-out, ease-in, ease-out;    transition-delay: 1s, 1s, 0s;}img:hover{    width: 200px;    height: 200px;    transform: rotate(90deg);}

实现效果是当鼠标悬浮在元素(img)上时，他的宽度、高度和方向会发生变化，过渡时间都为1s，过渡方式分别为ease-in-out, ease-in和ease-out，旋转效果会立刻执行，而高宽操作会在1s后变化。

当鼠标移出元素所在范围时，它会逐渐变回原来的样式。

动画效果

我们也可以transition简写来完成定义上面的样式：

img {    width: 90px;    height: 90px;    transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ;}img:hover{    width: 200px;    height: 200px;    transform: rotate(90deg);}

我们还可以通过@keyframes规定来创建动画规则，通常用在较为复杂而又无需用到False动画和JavaScript的地方。

例如下面一个简单的动画效果

<style></style>

动画效果

部分CSS样式代码为：

#my_animate {    width: 60px;    height: 60px;    background: #060;    color: #fff;    position: relative;    font: bold 12px ‘微软雅黑‘;    padding: 20px 10px 0px 10px;    animation: my_animate 5s infinite;}@keyframes my_animate { 0%   {transform: rotate(0deg);left:0px;} 25%  {transform: rotate(90deg);left:0px;} 50%  {transform: rotate(0deg);left:400px;} 55%  {transform: rotate(0deg);left:400px;} 70%  {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;} 100% {transform: rotate(-360deg);left:0px;}}

使用@keyframes创建动画时，需要绑定一个选择器。创建动画时至少要定义动画的名称和动画的时长，这样即可将@keyframes创建动画绑定到相应的选择器上。

若在创建动画时没有定义时长，那么就会取默认值0，就不会执行动画效果。

animation属性以及说明

属性描述说明
@keyframes创建动画规则 
animation定义动画简写属性除了 animation-play-state 属性
animation-name定义 @keyframes 动画的名称 
animation-duration定义动画完成一个周期所花费时间(秒或者毫秒)默认值：0
animation-timing-function定义动画的速度曲线默认值 ：ease
animation-delay定义动画何时开始默认值 ：0
animation-iteration-count定义动画被播放的次数默认值 ：1
animation-direction定义动画是否在下一周期逆向地播放默认值 ：normal
animation-play-state定义动画是否正在运行或暂停默认值 ：running
animation-fill-mode定义对象动画时间之外的状态 

上面的定义的动画效果是一个周期5s，并且进行无限次的循环播放。在@keyframes中规定了动画的6各阶段的样式，最终形成一个简单的动画效果。


联系
我们