专栏首页Web前端开发CSS3过渡与动画

CSS3过渡与动画

一、CSS3 过渡

  • transition-property

   规定过渡效果的 CSS 属性名

   -webkit-transition-property: none / all / property;
      -moz-transition-property: none / all / property;
       -ms-transition-property: none / all / property;
        -o-transition-property: none / all / property;
           transition-property: none / all / property;

/*参数说明
- none
- all,默认值
- property(CSS属性名) 例如color、opacity...*/
  • transition-duration

   规定完成过渡效果需要多少时间

transition-duration: time;

/*参数说明
- 规定完成过渡效果需要花费的时间(以秒或毫秒计)
- 默认值是 0*/
  • transition-timing-function

   规定速度效果的速度曲线

transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)(最佳效果)

− step-start:等同于 steps(1, start)
− step-end:等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数
                                         第一个参数:必须为正整数,指定函数的步数
                                         第二个参数:取值可是start或end,指定每一步的值发生变化的时间点
                                         第二个参数:可选,默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>):
  特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内*/
  • transition-delay

   定义过渡效果何时开始

transition-delay: time;

/*参数说明
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值是 0*/
  • transition复合写法
transition: property duration timing-function delay;
  • 实际应用
div
{
    width:100px;
    height:75px;
    background:#0b2632;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:ease-in-out;
    transition-delay:0.5s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:0.5s;
}

div:hover
{
    width:200px;
}

二、CSS3 动画

  • Keyframes

   关键帧,可以指定任何顺序排列来决定Animation动画变化的关键位置

@keyframes animationname {
   keyframes-selector {
       css-styles;
   }
}

/*参数说明
 animationname:必写项,定义animation的名称
 keyframes-selector:必写项,动画持续时间的百分比,0-100%、from (0%)、to (100%)
 css-styles:必写项,一个或多个合法的CSS样式属性
 @keyframes animationname在style中单独写入
*/
  • animation-name

   规定需要绑定到选择器的 keyframe 名称

animation-name: keyframename / none;

/*参数说明
 keyframename:指定要绑定到选择器的关键帧的名称;
 none:指定有没有动画(可用于覆盖从级联的动画)
*/
  • animation-duration

   规定完成动画所花费的时间,以秒或毫秒计

animation-duration: time;

/*参数说明
 time指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果
*/
  • animation-timing-function

   规定动画的速度曲线

animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ]) 
                            cubic-bezier(<number>, <number>, <number>, <number>);

/*参数说明
− linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)(最佳效果)

− step-start:等同于 steps(1, start)
− step-end:等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数
                                         第一个参数:必须为正整数,指定函数的步数
                                         第二个参数:取值可是start或end,指定每一步的值发生变化的时间点
                                         第二个参数:可选,默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>):
  特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内*/
  • animation-delay

   规定在动画开始之前的延迟

animation-delay: time;

/*参数说明
 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0
 如果值为负,则动画马上开始,但会跳过相应的时间进入动画
*/
  • animation-iteration-count

   规定动画应该播放的次数

animation-iteration-count: infinite / <number>;

/*参数说明
 <number>为数字,其默认值为“1”;infinite为无限次数循环
*/
  • animation-direction

   规定是否应该轮流反向播放动画

animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit;

/*参数说明
 normal:正常方向
 reverse:反方向运行
 alternate:先正后反,并持续交替运行(需依赖infinite)
 alternate-reverse:先反后正,并持续交替运行(需依赖infinite)
*/
  • animation-fill-mode

   规定当动画完成或当动画有延迟未开始播放时,要应用到元素的样式

animation-fill-mode: none / forwards / backwards / both / initial / inherit;

/*参数说明
 none:默认值。不设置对象动画之外的状态
 forwards:设置对象状态为动画结束时的状态
 backwards:设置对象状态为动画开始时的状态
 both:设置对象状态为动画结束或开始的状态
*/
  • animation-play-state

   规定动画运行或暂停

animation-play-state: paused / running;

/*参数说明
 paused:指定暂停动画
 running:默认值,指定正在运行的动画
*/
  • animation

   复合写法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

/*参数说明
 默认写在前面的时间为duration
*/
  • will-change

   增强页面渲染性能,提前通知浏览器元素将要做什么动画,让浏览器提前准备合适的优化设置

will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>;

/*参数说明
 auto:此关键字表示没有特定的意图,适用于它通常所做的任何启发式和优化
 scroll-position:表示将要改变元素的滚动位置
 contents:表示将要改变元素的内容
 <custom-ident>:明确指定将要改变的属性与给定的名称
 <animateable-feature>:可动画的一些特征值,比如left、top、margin等
*/


兼容性:IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
  • 实际应用
div
{
    width:100px;
    height:100px;
    background:black;
}
    
div:hover
{
            animation:myfirst 5s;
         -o-animation:myfirst 5s; /* Opera */
       -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background:black;}
    25%  {background:blue;}
    50%  {background:red;}
    100% {background:white;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 序列化和反序列化

    Leophen
  • ES6 Promise

    Promise 的状态只有两种可能,从 pending 变为 fulfilled 和 从 pending 变为 rejected,一旦状态变化,就不会再改变

    Leophen
  • ES6 对象的扩展

    上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值

    Leophen
  • css3过渡与动画

    过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:...

    河湾欢儿
  • CSS动画简介

    现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端。 但是,CSS动画除外,它实在太有用了。 ? 本文介绍CSS动画的两大组成部分:trans...

    ruanyf
  • dotnet 设计规范 · 数组定义

    X 不建议设置数组类型的字段为只读。虽然用户不能修改字段,但是可以修改字段里面的元素。如果需要一个只读的集合,建议定义为只读集合。

    林德熙
  • 微信小程序:动画(Animation)

    官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

    FlyLolo
  • CSS动画简介

    在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。

    javascript.shop
  • Android十八章:属性动画Android属性动画(第一话)

    Android动画能给界面带来很炫的效果,如果我们要实现这些效果,在android3.0版本前实现动画主要有2种方式,帧动画和补间动画。

    ppjun
  • 小程序·云开发实战 - 校园约拍小程序

    创意来源于生活,之所以开发这个校园约拍小程序,是因为在摄影选修课上常听老师抱怨外出写生老找不到模特,许多大学生都想拥有一套专属自己记忆的摄影作品,记录下不会磨灭...

    腾讯云开发TCB

扫码关注云+社区

领取腾讯云代金券