css3实现动画效果常用方法指南

简介: css3实现动画效果常用方法指南
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~
这篇文章只是一个简介,方便了解全貌,当你想不起某一个用法的时候,能够快速地找到提示。
官网参考: https://www.runoob.com/css3/css3-animations.html

🍒 第一部分:CSS 变形属性

  • CSS3实现圆角(border-radius)
  • 阴影(box-shadow)
  • 对文字加特效(text-shadow、)
  • 线性渐变(gradient)
  • 旋转(transform)
  • transform:translate(0px,-30px) 移动元素,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。在此基础上有两个扩展函数 translateX()和translateY();
  • transform:rotate(9deg) 旋转元素,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
  • transform:scale(0.85,0.90) 方法用于增加或缩小元素的大小,可以使用元素尺寸发生变化,在此基础上用两个扩展函数 scaleX()和scaleY();
  • transform:skew(-9deg,0deg) 让元素倾斜,在此基础上有两个扩展函数skewX()和skewY()
  • transform:matrix(0.866,0.5,-0.5,0.866,0,0):方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

🍓 第二部分:CSS 过渡属性Transition

css过渡属性
过渡属性是一个复合属性,主要包括以下几个属性

  • transition-property:规定应用过渡的 CSS 属性的名称。
  • transition-duration:定义过渡效果花费的时间。默认是 0。
  • transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。
  • transition-delay:规定过渡效果何时开始。默认是 0。

1、transition-property属性

规定应用过渡的 CSS 属性的名称。(需要产生动画的属性)才能具备过渡效果。
如要改变元素的宽度属性,可将transition-property的属性设置为width

transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */

2、transition-duration属性

主要用来设置一个属性过渡到另一个属性所需的时间,也就是持续时间
如果改变一个属性,所持续的时间为5秒,可将该属性的值设置为5秒

transition-duration: 5s;\
-webkit-transition-duration: 5s; /* Safari */

3、 transition-timing-function属性

属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);包括这几种
image.png

transition-timing-function: linear;\
-webkit-transition-timing-function: linear; /* Safari and Chrome */

4、transition-delay属性

transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后等待多长时间开始执行。
等待2秒前切换效果开始:

transition-delay: 2s;\
-webkit-transition-delay: 2s; /* Safari */

5、transition的局限

transition的优点在于简单易用,但是它有几个很大的局限。
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。

🍊 第三部分:CSS Animation 动画

@keyframes 规则

keyframes关键字用来定义动画的各个状态,它的写法相当自由。

@keyframes myfirst { 
    0% {background: red;} 
    25% {background: yellow;} 
    50% {background: blue;} 
    100% {background: green;} 
}
@keyframes myfirst { 
    from {background: red;} 
    to {background: yellow;} 
}

@keyframes myfirst {
    from { background: red }
    50% { background: orange }
    to { background: yellow }
}
<div></div> //html div元素
/*动画效果css*/
div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}

另外一点需要注意的是,浏览器从一个状态向另一个状态过渡,是平滑过渡。steps函数可以实现分步过渡。
这里有一个非常神奇的可以看到steps函数的用处。案例如下:

<h1>Animation, ha ha ha.</h1>
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 { 
    font: bold 200% Consolas, Monaco, monospace;
    border-right: .1em solid;
    width: 16.5em; /* fallback */
    width: 20ch; /* # of chars */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 20s steps(20, end), /* # of steps = # of chars */
               blink-caret .5s step-end infinite alternate;
}

效果图:
Video_222.gif

animation属性

image.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
        /*animation:myfirst 5s linear 2s infinite alternate;*/ /*简写可以将下面的都省略*/
    animation-name:myfirst;
    animation-duration:5s;
    animation-timing-function:linear;
    animation-delay:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;
    /* Safari and Chrome: */
    -webkit-animation-name:myfirst;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    -webkit-animation-play-state:running;
}
@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
目录
相关文章
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
107 58
|
18天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
22 1
|
22天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
41 1
|
1月前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
2月前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
36 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
32 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
17 2
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
50 0
JS配合CSS3实现动画和拖动小星星小Demo