css动画

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> css动画

css动画

首先要明白动画是一帧一帧的,由多个帧拼起来的动画

@keyframes

此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分

其指示了一个过程到另一个过程的过程

关键帧还具有名字,在应用的时候通过名字将其绑定。

如果关键帧重复定义,则根据最后一次定义为准

关键帧中的important会被略过

举个栗子

定义一个关键帧

1234567891011
@keyframes myFrames {    form {        background:#a7e5c6;        width:100px;    }     to {        width:90%;        background:#c6c2a3;    }}

@keyframes myFrames {
form {
background:#a7e5c6;
width:100px;
}


to {
    width:90%;
    background:#c6c2a3;
}

}

样式如下

css动画

这样就完成一次动画操作

分开定义

也可以进行分开定义

按照百分号进行定义,结果如下

关键帧如下

12345678910111213141516171819202122
@keyframes myFrames {    0% {        width:200px;        background:#827e64;    }     20% {        width:400px;        background:#86bece;    }     50% {        height:600px;        background:#af92aa;    }     90% {        width:300px;        height:400px;        background:#698771;    }}

@keyframes myFrames {
0% {
width:200px;
background:#827e64;
}


20% {
    width:400px;
    background:#86bece;
}

50% {
    height:600px;
    background:#af92aa;
}

90% {
    width:300px;
    height:400px;
    background:#698771;
}

}

效果如下

css动画

animation

animation 同样是一个简写属性,相比较js写动画来说,css动画已经灰常简单了。

大概看了一点纯js动画,js动画核心在于对css样式的更改,外加一个重复时间对css不断的累加得到动画效果

下面依次说明

animation-name

和关键帧进行绑定

必须和关键帧的名字相同(废话)

animation-duration

指定一个动画的周期

负值的动画无效

举一个栗子

1234567891011121314151617181920212223242526272829303132
div {    width:300px;    height:400px;    background:#698771;    margin:auto;    animation-name: myFrames;    animation-duration:.9s;} /*关键帧*/@keyframes myFrames {    0% {        width:200px;        background:#827e64;    }     20% {        width:400px;        background:#86bece;    }     50% {        height:600px;        background:#af92aa;    }     90% {        width:300px;        height:400px;        background:#698771;    }}

div {
width:300px;
height:400px;
background:#698771;
margin:auto;
animation-name: myFrames;
animation-duration:.9s;
}

/关键帧/
@keyframes myFrames {
0% {
width:200px;
background:#827e64;
}


20% {
    width:400px;
    background:#86bece;
}

50% {
    height:600px;
    background:#af92aa;
}

90% {
    width:300px;
    height:400px;
    background:#698771;
}

}

动画效果如下

css动画

animation-timing-function

定义一个动画的过程,类似于过渡的函数

同样的,有贝塞尔曲线等等

不在阐述

DevTools

谷歌浏览器的调试工具具有该方法,可以直接使用调试工具绘制贝塞尔曲线

css动画

animation-delay

定义动画的延迟

css动画

css如下

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
* {    margin:0;    padding:0;}body {    position:relative;}div {    width:400px;    height:400px;    position: absolute;    left:0;    top:0;    bottom:0;    margin:auto;    background:#698771;    border-radius:1000px;    animation-name: myFrames;    animation-duration:5s;    animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);    animation-delay:.9s;}div div {    width:40px;    height:40px;    position:absolute;    left:0;    right:0;    top:0;    bottom:0;    margin:auto;    background:#e8e3da;    animation-name:myCenter;} /*关键帧*/@keyframes myFrames {    from {        left:0;    }     to {        left:70%;    }} @keyframes myCenter {    from {        left:0;    }     to {        left:0;    }}
  • {
    margin:0;
    padding:0;
    }
    body {
    position:relative;
    }
    div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation-name: myFrames;
    animation-duration:5s;
    animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
    animation-delay:.9s;
    }
    div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
    }

/关键帧/
@keyframes myFrames {
from {
left:0;
}


to {
    left:70%;
}

}

@keyframes myCenter {
from {
left:0;
}


to {
    left:0;
}

}

html如下

1234567891011121314
!DOCTYPE htmlhtmlhead    meta charset="utf-8"    link rel="stylesheet" href="./index.css" type="text/css"    titlecss动画/title/headbody    div        div/div    /div/body/htmlscript src="./index.js"/script

!DOCTYPE html
html
head
meta charset=”utf-8”
link rel=”stylesheet” href=”./index.css” type=”text/css”
titlecss动画/title
/head
body
div
div/div
/div
/body
/html
script src=”./index.js”/script

动画延迟了0.9秒

animation-iteration-count

定义动画的迭代次数infinite 为永远重复

数值为number

举栗子

1
animation-iteration-count:3;

animation-iteration-count:3;

动画重复播放3次。

1
animation-iteration-count:infinite;

animation-iteration-count:infinite;

动画永远重复播放

animation-direction

定义是否向前,向后,是否交替来回

如果想要重复的多次播放,必须有animation-iteration-count的值为infinity否则不会出现重复播放

normal

为一个每次重复重新的位置开始播放(每次都将重置为新状态,开始执行)

css动画

reverse

倒序播放

css动画

alternate

奇数正向播放

偶数倒序播放

即来回

css动画

alternate-reverse

奇数倒序播放

偶数正向播放

即倒来回

css动画

ps 动画具有继承的属性

animation-fill-mode

forwards

将会保留最后一个关键帧,让其停留。

css动画

css

123
 /*animation-iteration-count:infinite;*/    animation-direction:alternate;    animation-fill-mode:forwards;

/animation-iteration-count:infinite;/
animation-direction:alternate;
animation-fill-mode:forwards;

backwards

将会应用第一个动画值

css动画

和none的区别在于none使用默认的css样式,backwards将会使用动画的第一帧

123
/*animation-iteration-count:infinite;*/    animation-direction:alternate;    animation-fill-mode:backwards;

/animation-iteration-count:infinite;/
animation-direction:alternate;
animation-fill-mode:backwards;

ps 加上注释的原因是因为如果不加将会重复播放。

both

将会遵守倒序还是正序的停留

正序

123
 /*animation-iteration-count:infinite;*/
    animation-direction:normal;
    animation-fill-mode:both;

/animation-iteration-count:infinite;/
animation-direction:normal;
animation-fill-mode:both;

css动画

倒序

css动画
123
/*animation-iteration-count:infinite;*/    animation-direction:reverse;    animation-fill-mode:both;

/animation-iteration-count:infinite;/
animation-direction:reverse;
animation-fill-mode:both;

总写

按照上方顺序即可

css 如下

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
* {    margin:0;    padding:0;}body {    position:relative;}div {    width:400px;    height:400px;    position: absolute;    left:0;    top:0;    bottom:0;    margin:auto;    background:#698771;    border-radius:1000px;    animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;}div div {    width:40px;    height:40px;    position:absolute;    left:0;    right:0;    top:0;    bottom:0;    margin:auto;    background:#e8e3da;    animation-name:myCenter;} /*关键帧*/@keyframes myFrames {    from {        left:0;    }     to {        left:70%;    }} @keyframes myCenter {    from {        left:0;    }     to {        left:0;    }}
  • {
    margin:0;
    padding:0;
    }
    body {
    position:relative;
    }
    div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
    }
    div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
    }

/关键帧/
@keyframes myFrames {
from {
left:0;
}


to {
    left:70%;
}

}

@keyframes myCenter {
from {
left:0;
}


to {
    left:0;
}

}

1234567891011121314
!DOCTYPE htmlhtmlhead    meta charset="utf-8"    link rel="stylesheet" href="./index.css" type="text/css"    titlecss动画/title/headbody    div        div/div    /div/body/htmlscript src="./index.js"/script

!DOCTYPE html
html
head
meta charset=”utf-8”
link rel=”stylesheet” href=”./index.css” type=”text/css”
titlecss动画/title
/head
body
div
div/div
/div
/body
/html
script src=”./index.js”/script

演示效果 https://melovemingming.gitee.io/code/practice/web/08/10/

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> css动画


  转载请注明: 好好学java css动画

 上一篇
CSS基础-10种居中方法 CSS基础-10种居中方法
10种居中方法如下。从技术角度讲,适用于“水平垂直居中”的方法必然适用于“水平居中”和“垂直居中”的情况;适用于不定宽(高)居中的方法也必然适用于固定宽(高)居中的情况。项目中根据实际需求选用最优最简洁的方法。 以一组demo分别介绍不
2021-04-05
下一篇 
详解 CSS 绝对定位 详解 CSS 绝对定位
基本定义和用法在 CSS 中, position 属性指定一个元素(静态的,相对的,绝对或固定,以及粘性定位)的定位方法的类型。 当设置 position 属性的值为 absolute 时,生成绝对定位的元素,将该元素从文档流中删除,
2021-04-05