css动画(1)

·  阅读 53

「这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战

下面这两个是css实现动画的属性。

transition

transition有四个属性

transition-delay

CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

transition-duration

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。

transition-property

transition-property 指定应用过渡属性的名称

它有两种写法,要不就指定某个要改变的属性。要不就可以直接写all,不管你啥改变,我都执行动画,一般来说,为了方便,我写得比较多的就是这个all了,当然,并不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果

可以找到一些总结出可过度的效果

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
复制代码
transition-timing-function

transition变化的方法。方法有自带的几种动画方法: linear、ease、ease-in、ease-out、ease-in-out

描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

可以看到,有一个cubic-bezier这个函数,贝塞尔曲线通过p0-p3四个控制点来控制,,其中p0表示(0,0),p3表示(1,1)。而就是通过确定p1(x1,y1)和p2(x2,y2)的值来确定的,具体也没有深入去了解,但是这个可以在一个网站上去使用坐标轴拖动,来自己定义自己想要的动画实现。cubic-bezier.com/#.11,1.17,.…

image.png

transition可以写两个、三个、四个,都可以让动画去动,第一个时间是过度动画需要的时间,第二个动画是过度动画需要等待多长时间才执行。过渡transition的这四个子属性只有是必需值且不能为0

一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active

下面mdn展示的基础使用

/* property name | duration */
transition: all 4s;

/* property name | duration | delay */
transition: all 4s 1s;

/* property name | duration | timing function */
transition: all 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;
复制代码

可以整体的使用缩写,也可以像下面这样单独,一个个的去写

    transition-duration: 3s;
    // 下面三个都是默认值
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
复制代码

\

分类:
前端
标签: