CSS3中过渡与动画的区别是什么

PHP中文网 • 2025年3月11日 21:08:53 • 编程技术 • 阅读 1

CSS3中过渡与动画的区别：1、css过渡需要事件触发，而css动画不需要；2、css过渡只有一组（两个）关键帧，分别设置开始和结束的动作，而css动画可以定义多个关键帧。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

transition 过渡

让css变化平滑一些

属性：

立即学习“前端免费学习笔记（深入）”；

属性描述

transtion-property指定过渡的属性transtion-duration指定过渡所需时间transtion-timing-function指定过渡函数transtion-delay指定过渡延迟时间

语法：

transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；    //合在一起

登录后复制

栗子：

img{    height:150px;    width:150px;    transition: height 0.5s linear 0.5s;}img:hover{    height:100px;}

登录后复制

transition的优点在于简单易用，但是它有几个很大的局限。

transition需要事件触发，所以没法在网页加载时自动发生。transition是一次性的，不能重复发生，除非一再触发。transition只能定义开始状态和结束状态，不能定义中间状态。一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

animation 动画

通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果

属性：

立即学习“前端免费学习笔记（深入）”；

属性描述

animation-name指定关键帧动画的名字animation-duration指定动画播放所需时间，单位秒animation-timing-function指定动画播放方式animation-delay指定动画开始时间，单位秒animation-iteration-count指定动画的播放次数，默认为1，若为infinite，则无限次循环播放animation-direction指定动画的播放方向，默认为normal，若为alternate，即轮流反向播放

制作动画分为两部分：

用关键帧声明一个动画

在animation调用关键帧声明的的动画。

@keyframes就是关键帧，一个动画中可以有很多个帧。

一个@keyframes中的样式规则是由多个百分比构成的，可以在这个规则上创建多个百分比，从而达到一种不断变化的效果。

栗子：

    img{        width:90px;        height:90px;        animation: mychange 1s infinate 1s;        -webkit-animation: mychange 1s infinate 1s;    }        @keyframes mychange{        0%{width:90px; height:90px;  }        50%{width:130px; height:130px;}        100%{width:200px; height:200px;}    }    @-webkit-keyframes mychange{        0%{width:90px; height:90px;  }        50%{width:130px; height:130px;}        100%{width:200px; height:200px;}    }

登录后复制

上面代码中的0% 100%的百分号都不能省略，0%可以由from代替，100%可以由to代替。要让mychange动画有效果，就必须要通过CSS3 animation属性来调用它。

css过渡与动画的区别

其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

1）css过渡需要有一个事件触发（像 :hover等），才会起作用，而animation不需要。

2）过渡只有一组（两个：开始-结束）关键帧，动画可以定义多个关键帧。

3）用过渡和动画做一个鼠标悬停时产生动效的效果，当鼠标移开时，用过渡做的效果会缓慢的变回原来的样子，而动画是唰的一下变回原来的样子。

（学习视频分享：css视频教程、web前端入门教程）

以上就是CSS3中过渡与动画的区别是什么的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2937156.html