它们必须有相同的类型和相同的停止数值以便执行动画。使用transform-origin属性,可以改变变形的基准点。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
1. transition 过渡2. transform 变形3. animation 关键帧动画
1. 语法:1. transition: property duration timing-function delay1. transition: 属性是个复合属性2. transition-property: 规定设置过渡效果的 css 属性名称3. transition-duration: 规定完成过渡效果需要多少秒或毫秒4. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线5. transition-delay: 指定开始出现的延迟时间2. 默认值分别为: all 0 ease 0;1. 注: transition-duration 时长为 0, 不会产生过渡效果3. 改变多个 css 属性的过渡效果时, 代码示例:1.a {transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;}4. 子属性:1. transition-property1. transition-property: none |all |property;1. 值为 none 时, 没有属性会获得过渡效果2. 值为 all 时, 所有属性都将获得过渡效果3. 值为指定的 css 属性应用过渡效果, 多个属性用逗号隔开2. color : background-color, border-color, color, outline-color ;3. length : 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,4. integer : 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor()转换为整数时发生 如: outline-offset,z-index5. number : 真实的（浮点型）数值, 如:zoom,opacity,font-weight6. rectangle : 通过x, y, width 和 height（转为数值）变换，如: crop7. visibility : 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility8. shadow : 作用于color, x, y 和 blur（模糊）属性,如：text-shadow9. background-image : 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画。2. transition-duration1. transition-duration: time;1. 该属性主要用来设置一个属性过渡到另一个属性所需的时间, 也就是从旧属性过渡到新属性花费的时间长度, 俗称持续时间3. transition-timing-function1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);1. 该属性指的是过渡的 “缓动函数” 。 主要用来指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 解释下:2. 注意: 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1)4. transition-delay1. 这个属性没什么说的了, 就是过渡效果开始前的延迟时间, 单位秒或者毫秒
1. 可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理1. 旋转 rotate1. 用法: transform: rotate(45deg);2. 共一个参数 “角度”, 单位 deg 为度的意思, 正数为顺时针旋转, 负数为逆时针旋转, 上述代码作用是顺时针旋转45度2. 缩放 scale1. 用法: transform: scale(0.5)或者transform: scale(0.5, 2);2. 一个参数时: 表示水平和垂直同时缩放该倍率3. 两个参数时: 第一个参数指定水平方向的缩放倍率, 第二个参数指定垂直方向的缩放倍率 。3. 倾斜 skew1. 用法: transform: skew(30deg)或者 transform: skew(30deg, 30deg);2. 一个参数时: 表示水平方向的倾斜角度 。3. 两个参数时: 第一个参数表示水平方向的倾斜角度, 第二个参数表示垂直方向的倾斜角度 。4. skew 的默认原点 transform-origin 是这个物件的中心点4. 移动 translate1. 用法: transform: translate(45px)或者 transform: translate(45px, 150px);2. 一个参数时: 表示水平方向的移动距离;3. 两个参数时: 第一个参数表示水平方向的移动距离, 第二个参数表示垂直方向的移动距离 。2. 基准点 transform-origin1. 在使用 transform 方法进行文字或图像的变形时, 是以元素的中心点为基准点进行的 。 使用 transform-origin 属性, 可以改变变形的基准点 。2. 用法: transform-origin: 10px 10px;3. 表示相对左上角原点的距离, 单位 px, 第一个参数表示相对左上角原点水平方向的距离, 第二个参数表示相对左上角原点垂直方向的距离;4. 两个参数除了可以设置为具体的像素值, 其中第一个参数可以指定为 left、center、right, 第二个参数可以指定为 top、center、bottom。3. 多方法组合变形1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行
1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。5. 语法1. animation: name duration timing-function delay iteration-count direction;1. animation-name规定需要绑定到选择器的 keyframe 名称2. animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3. animation-timing-function规定动画的速度曲线。 默认是 "ease"。4. animation-delay规定动画何时开始 。 默认是 0。5. animation-iteration-count规定动画被播放的次数 。 默认是 1。6. animation-direction规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。1. alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效2. 语法: animation-direction: alternate;2. animation-play-state规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。1. 语法: animation-play-state: paused;3. animation-fill-mode属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。1. none:不改变默认行为 (默认, 回到动画没开始时的状态) 。2. forwards:当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。3. backwards:在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。4. both:向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。5. 语法:animation-fill-mode: forwards1. 0% 是动画的开始, 100% 是动画的完成。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画- transition </title></head><style>* {padding: 0;margin: 0;}/* CSS实现示例 */.w_tran-css {width: 350px;height: 350px;background: url('./images/1-2-https原理.jpg') no-repeat center;transition: all 1s ease-in-out;background-size: 110%;border: 5px solid slateblue;}.w_tran-css:hover {background-size: 120%;border: 5px solid skyblue;}</style><body><div ><p>transition 动画 --- 测试背景图中的动画效果</p></div></body></html>
展示效果如图所示:
3.2 transition 示例二<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 - transition</title></head><style>* {margin: 0;}.w_outer {display: flex;justify-content: center;background-color: skyblue;height: 100vh;}nav {display: flex;width: 80%;height: 40px;gap: 40px;}a {flex: 1;background-color: #333;color: #fff;border: 1px solid;padding: 8px;text-align: center;text-decoration: none;transition: all 0.5s ease-out;}a:hover, a:focus {background-color: steelblue;color: #333;}</style><body><div ><nav><a href="#">Home</a><a href="#">About</a><a href="#">Contact Us</a><a href="#">Links</a></nav></div></body></html>
展示效果如图所示:
3.3 transform 示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 - transform</title></head><style>* {padding: 0;margin: 0;}/* 简单示例-1 */.w_outer {width: 300px;border: 120px solid red;}#btn {display: inline-block;width: 300px;height: 300px;border: 1px solid blue;position: relative;cursor: pointer;}.ball {border-radius: 25px;width: 50px;height: 50px;background: rgb(17, 8, 8);position: absolute;top: 0;left: 0;transition: transform 1s;}/* 简单示例-1 */.w_img {width: 300px;/* transform 设置动画时, 需要配合 transition 来设置过渡时间*/transition: 1s;}.w_img:hover {transform: rotate(90deg);transform-origin: 0, 0 ;}/* 简单示例-3 */.w_trans-3 {border: solid red;transform: translate(30px, 20px) rotate(20deg);width: 140px;height: 60px;}</style><body><!-- 示例一 --><div ><div ><p>transform --- 动画 Click anywhere to move the ball</p><div></div></div></div><!-- 示例二 --><imgsrc="./images/1-https-注释.png" ><!-- 示例三 --><div >transform - 设置变形</div></body><script>var f = document.getElementById('foo');var far = document.getElementById('btn')far.onclick =function(ev, obj){f.style.transform = 'translateY(' (ev.clientY - 25 - this.offsetLeft) 'px)';f.style.transform= 'translateX(' (ev.clientX - 25 - this.offsetTop) 'px)';};</script></html>
展示效果如图所示:
3.4 transform 示例二<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 - transform -- 经典旋转正方体</title></head><style>ul{position: relative;height: 500px;width: 500px;list-style: none;margin: 100px auto;transform-style: preserve-3d;animation: ani 4s linear 0s infinite;}li{position:absolute;height: 500px;width: 500px;font-size: 32px;text-align: center;line-height: 500px;backface-visibility: hidden;}.w_noodle-1 {background-color:green;transform: translateZ(250px);}.w_noodle-2 {background-color: yellow;transform: rotateY(90deg) translateZ(250px);}.w_noodle-3 {background-color: orange;transform: rotateX(90deg) translateZ(250px);}.w_noodle-4 {background-color: red;transform: rotateX(-90deg) translateZ(250px);}.w_noodle-5 {background-color:blue;transform: rotateY(-90deg) translateZ(250px);}.w_noodle-6 {background-color:purple;transform: rotateX(180deg) translateZ(250px);}@keyframes ani{100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}</style><body><ul><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li></ul></body></html>
展示效果如图所示:
3.4 A transform 示例三<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 - transform -- 时钟</title></head><style >li{list-style: none;}#w_outer{width: 400px;height: 400px;position: absolute;top:calc(50% - 200px);left:calc(50% - 200px);border: 2px solid palegoldenrod;}#w_cont{width: 200px;height: 200px;position: absolute;top:calc(50% - 100px);left:calc(50% - 100px);border: 2px solid cyan;border-radius: 50%;}.w_h-item{width: 4px;height: 12px;position: absolute;top: 0;left: calc(50% - 2px);background-color: gray;transform-origin: 2px 100px;}.angle30{transform : rotate(30deg);}.angle60{transform : rotate(60deg);}.angle90{transform : rotate(90deg);}.angle120{transform : rotate(120deg);}.angle150{transform : rotate(150deg);}.angle180{transform : rotate(180deg);}.angle210{transform : rotate(210deg);}.angle240{transform : rotate(240deg);}.angle270{transform : rotate(270deg);}.angle300{transform : rotate(300deg);}.angle330{transform : rotate(330deg);}#fixPoint{width: 10px;height: 10px;position: absolute;top:calc(50% - 5px);left:calc(50% - 5px);background-color: cadetblue;border-radius: 50%;}#hour{width: 6px;height: 70px;position:absolute;top: 40px;left: calc(50% - 3px);background-color: darkblue;transform-origin: 50% 60px;}#minute{width: 4px;height: 75px;position:absolute;top: 35px;left: calc(50% - 2px);background-color: yellow;transform-origin: 50% 65px;}#second{width: 2px;height: 90px;position:absolute;top: 20px;left: calc(50% - 1px);background-color: red;transform-origin: 50% 80px;}</style><body><div id = "w_outer"><div id = 'w_cont'><ul id = "w_hour-line"><li class = "w_h-item"></li><li class = "w_h-item angle30"></li><li class = "w_h-item angle60"></li><li class = "w_h-item angle90"></li><li class = "w_h-item angle120"></li><li class = "w_h-item angle150"></li><li class = "w_h-item angle180"></li><li class = "w_h-item angle210"></li><li class = "w_h-item angle240"></li><li class = "w_h-item angle270"></li><li class = "w_h-item angle300"></li><li class = "w_h-item angle330"></li></ul><div id = "fixPoint"></div><!-- 时针 --><div id = "hour" ></div><!-- 分针 --><div id = "minute" ></div><!-- 秒针 --><div id = "second" ></div></div></div></div></body><script>window.onload = function(){var hourHand = document.getElementById('hour');var minuteHand = document.getElementById('minute');var secondHand = document.getElementById('second');// 初始化(细节知识点: 如果这里不执行初始化, 在页面显示的内容会有一个闪屏的问题: 分针、时针、秒针，重叠在12点这个位置)initTime()// 执行定时器setInterval(initTime, 1000)function initTime() {var nowTime = new Date();// 求取时针角度(这里 -12 在显示上是正确的)var hourVal = nowTime.getHours() - 12;var hourDeg = hourVal / 12 * 360'deg';// 求取分针角度var minuteVal = nowTime.getMinutes();var minuteDeg = minuteVal / 60 * 360'deg';// 求取秒针角度var secondVal = nowTime.getSeconds();var seconDeg = secondVal / 60 * 360'deg';// 原生方法: 利用 DOM 元素的 style 属性设置hourHand.style.transform = 'rotate('hourDeg')';minuteHand.style.transform = 'rotate('minuteDeg')';secondHand.style.transform = 'rotate('seconDeg')';}}</script></html>
展示效果如图所示:
3.6 animation 示例一<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 -- animation 关键帧动画</title></head><style>p {width:300px;height:300px;background:red;animation:myfirst 3s infinite alternate;/* //Firefox */-moz-animation:myfirst 3s infinite alternate;/* // Safari and Chrome */-webkit-animation:myfirst 3s infinite alternate;/* // Opera */-o-animation:myfirst 3s infinite alternate;}@keyframes myfirst {from {background:red;}to {background:yellow;}}/* // Firefox */@-moz-keyframes myfirst {from {background:red;}to {background:yellow;}}/* // Safari and Chrome */@-webkit-keyframes myfirst {from {background:red;}to {background:yellow;}}/* // Opera */@-o-keyframes myfirst {from {background:red;}to {background:yellow;}}</style><body><p>无限循环播放动画效果</p></body></html>
展示效果如图所示:
3.7 animation 示例二<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 动画 -- animation 关键帧动画</title></head><style>p {background-color: skyblue;font: 96px "Microsoft Yahei";font-weight: 500;text-align: center;color: #f35626;cursor: pointer;}p:hover {animation:rubberBand 1.5s;}@-webkit-keyframesrubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes rubberBand{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}</style><body><div><p>Animate.css</p></div></body><script></script></html>
展示效果如图所示:
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200 的文章。
如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。
