css过渡和css动画的区别是什么?

更新日期: 2020-05-28阅读: 2.2k标签: 过渡

css3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果。那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助。


css过渡和动画的区别:

animation属性类似于transition,他们都是随着时间改变元素的属性值,那么区别是什么?

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

1)动画不需要事件触发,过渡需要。

2)过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。


过渡(transition)

过渡就是使瞬间的样式变化,按照一定方式变得缓慢平缓;

例如鼠标划过超链接时颜色的变化,点击按钮后的颜色变化等,默认转化都是瞬间完成,可能你已经习惯了这种变换,但有时候平缓一些看着还是比较舒适的;

要实现样式的过渡变化,那么首先就学要有样式变换,例如鼠标划过,单击按钮,点击图片等操作,来实现颜色,尺寸,位置等样式的变化;

下面是鼠标划过段落使文本变红的操作,应用所有 transition属性:

p:hover {
    color: red;
}
p {
    transition-property: color;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0;
}

一共四个值,功能基本都是字面翻译的意思:

transition-property

执行过渡的属性,例子设置为颜色color的变化,也可以是width, font-size等,不设置的话默认是all,即所有属性;

transition-duration

过渡的时间,单位是秒,如1s, 2.3s,不设置的话默认 0s,即无过渡效果;

transition-timing-function

设置过渡时的变化方式,默认是 ease,即速度由慢到快再到慢,常用的还有 linear,线性变化速度均匀,还有其他几个方式,过渡时间短的话看不出什么区别;

transition-delay

延迟时间,即多少秒后执行过渡效果,默认 0s,不延迟;

当然这么多单词可能记不住,一般使用快捷写法:

p {
    transition: color 2s linear 0;
}
/*最少要指定过渡时间*/
p {
    transition: 2s;
}

也可以设置每个样式分别过渡,例如:

p {
    transition: color 2s linear,
                font-size .5s,
                background: 1s;
}

每个样式过渡之间用逗号隔开就行了;

最后,由于是新特性,为了兼容性需要加上浏览器厂商前缀:

p {
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -ms-transition: 2s;
    -o-transition: 2s;
}


动画(animation)

CSS3的动画是个很不错的技术,基本能取代一些动图,javascript,flash等;

而动画里最重要的概念就是关键帧,也许你用PS做gif动图的时候看见过这个概念,所谓动画就是一帧一帧图片连续切换实现的效果,关键帧就是里面主要的一些帧;

实现CSS动画也需要设置关键帧 @keyframes:

@keyframes my-animation {
    0% {
        color: red;
    }
    50% {
        color: green;
    }
    100% {
        color: blue;
    }
}

格式如上,@keyframes后面跟的是自定义的动画名称,后面会用到。里面的0%,50%,100%便是设置的三个关键帧及其对应样式,如果只需要设置首尾两个关键帧,可以这样写:

@keyframes my-animation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}

当然样式除了color还能设置多项样式;

定义好关键帧后就直接在需要应用动画的元素标签内使用就行了,格式及所有属性如下:

p {
    animation-name: my-animation;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-play-state: running;
}

发现了吧,很多属性和transition里面一样,简单介绍下:

  • animation-name

就是之前跟在@keyframea后面的自定义名称,之前设置的是 my-animation;

  • animation-duration

  • animation-timing-function

  • animation-delay

和前面一样,默认分别为 0, ease, 0;

  • animation-iteration-count

动画播放的次数,默认 1,但一般设置为 infinite,即无限循环;

  • animation-direction

动画播放的方向,normal为默认,正向播放,reverse为反向播放,alternate为正向后反向,alternate-reverse为反向后正向;

  • animation-play-state

播放状态,默认 running,运行,paused为暂停,可以在javascript中使用对动画进行控制;

当然,这个属性比之前的transition还多,也有简便写法:

p {
    animation: my-animation 3s linear infinite alternate;
}

其中 animation-name 和 animation-duration为必须设置的属性;

同样,记得考虑浏览器兼容:

@-webkit-keyframes mycanimation {
    from {
        color: green;
    }
    to {
        color: blue;
    }
}
p {
    -webkit-animation: my-animation 3s linear infinite;
}
/* -moz-, -ms-, -o- 格式类似 */

链接: https://www.fly63.com/article/detial/9173

关于vue状态过渡transition不起作用的原因

总所周知,vue中的transition标签可以方便得进行动画过渡,使用的方法也很简单。这里需要主要一点的是:过渡的元素只能是以下之一:

关于CSS Transition,你需要知道的事

CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。

Transition 过渡

在一定时间内平滑的过渡,也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发;不能主动触发,只能被动触发

vue.js 过渡和动画

Vue 在插入、更新或者移除 DOM 时,动态添加css类名来达到想要的动画效果,transition标签给元素包裹一个transition标签,并设置name属性的值,这个值可以随意设置

vue 过渡

添加过渡效果的方法:在 CSS 过渡和动画中自动应用 class,可以配合使用第三方 CSS 动画库,如 Animate.css,在过渡钩子函数中使用 JavaScript 直接操作 DOM,可以配合使用第三方 JavaScript 动画库,如 Velocity.js

CSS过渡属性transition与display冲突问题

当改变元素display属性时,过渡属性transition失效。display:none的时候,页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果。

基于 React 实现一个 Transition 过渡动画组件

过渡动画使 UI 更富有表现力并且易于使用。如何使用 React 快速的实现一个 Transition 过渡动画组件?实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的动画效果,也就是通过添加或移除某个 class 样式。

transition不会产生效果 height:auto

假设一个DIV要实现手风琴效果,展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto

4 个Vue 路由过渡动效

Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当,可以使你的程序显得更加专业,从而增强用户体验。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!