animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡

1.动画(animation)的8个属性及 关键帧

animation:复合属性,设置对象的动画属性,共有8个属性

1.1 animation-name

作用:设置对象所应用的动画名称
书写格式:@keyframes 动画名称

 .box{
        margin: auto;
        width: 200px;
        height: 600px;
        padding-top: 150px;
        transform-style: preserve-3d;
        animation: flesh 5s 10;
    }
    @keyframes flesh{
        form{
            transform: rotateX(0) rotateY(0);
        }
        to{
            transform: rotatey(360deg) rotatex(45deg);
        }
    }

1.2 animation-duration

animation-duration主要用来设置动画的持续时间

1.3 transition-timing-function

transition-timing-function属性用来设置动画的过渡类型,它的常用取值如下:

  • linear:线性过渡
  • ease:平滑过渡
  • ease-in:由慢到快
  • ease-out:由快到慢
  • ease-in-out:由慢到快再到慢

1.4 animation-delay

animation-delay属性设置动画的延迟时间,一般属性常用取值取数字

1.5 animation-iteration-count

animation-iteration-count 属性设置动画的循环次数
属性取值:

  • infinite:无限循环
  • number: 循环的次数

1.6 animation-direction

animation-direction属性设置动画是否反向运动
常用属性取值如下:

  • normal:正方向运行
  • reverse:反方向运行
  • alternate:动画先正常运行再反方向运行,并持续交替运行
  • alternate-reverse:动画先反运行再正方向运行,并持续交替运行

1.7 animation-play-state

animation-play-state属性设置动画的状态
常用取值:

  • running:运动
  • paused: 暂停

1.8 animation-fill-mode

animation-fill-mode属性设置动画时间之外的状态
常用取值:

  • none:默认值,不设置对象动画之外的状态
  • forwards:设置对象状态为动画结束时的状态
  • backwards:设置对象状态为动画开始时的状态
  • both:设置对象状态为动画开始或结束时的状态

1.9关键帧

  • 可用from to
  • 百分比直接定义

2.变换元素的位置——平移

  • transform属性取值为translate(x,y)时,表示元素的平移。
  • 属性取值:数值、百分比,x轴取负值表示向左移动,y轴取负值表示向上移动
@keyframes flesh{
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(-400px);
        }
    }

3. 改变元素的状态——旋转

  • 旋转:围绕着指定的轴,按照指定的角度发生的旋转
  • 函数:rotateX rotateY
  • 函数取值:数字
  • 单位:deg(度数)
  • 取值为正顺时针旋转,取值为负逆时针旋转

4.改变元素的大小——缩放

  • 缩放:改变元素的大小
  • 函数:scale(x,y)
  • 若scale的取值只有一个,那么表示xy轴同时改变相同的倍数

5.改变元素的形态——倾斜

  • 函数:skew()
  • 取值 :为角度

6.过渡

6.1 什么是过渡

过渡:元素从一个状态到另外一个状态的平滑变换的过程
过渡属性:transition

6.2 过渡的四要素

6.2.1 transition-property

  • transition-property:元素的哪个状态发生变化时要使用过渡的效果,当指定的属性发生改变时,就会触发过渡效果。
  • 语法:
    transition-property:none | all | property
    transition-property:background;
    transition-property:all;

6.2.2 transition-duration

  • transition-duration:过渡效果的完成时间,通常以秒和毫秒为单位
  • 语法:
    transition-duration:1s;

6.2.3 transition-timing-function

transition-timing-function:指定时间内(transition-duration)过渡的速度效果
取值:

  • ease : 默认值,慢速开始,速度变快,慢速结束
  • linear:匀速开始到结束
  • ease-in:慢速开始,加速效果(由慢到快)
  • ease-out:慢速结束,减速效果(由快到慢)
  • ease-in-out:以慢速开始和结束,先加速再减速

6.2.4 transition-delay

transition-delay:过渡延迟时间,以秒或毫秒作为单位

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值