1.transtion-property:对元素的哪一个属性进行操作
2.transition-duration:过渡的持续时间,单位秒(s/ms)
3.transition-timing-function:过渡的速率变化方式
linear:以匀速过渡。
ease:慢速开始,中间快速,以慢速结束。
ease-in:慢速开始。
ease-out:慢速结束。
ease-in-out:以慢速开始和结束。
除了这些外,还可以使用贝塞尔曲线来自定义
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值,cubic-bezier参数的取值范围: x y x y
4.transition-delay: 指定延迟时间
复合写法:transition: transition-property transition-duration transition-timing-function transition-delay;
css动画:animation
===============
在使用animation属性实现动画需要两步
定义动画
调用动画
语法:
animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向
@keyframes:
@keyframes 动画名
{
0%{}
…
100%{}
}
说明:0%表示动画的开始,100%表示动画的结束,0%和100%是必须的。
在使用@keyframes规则时,如果仅仅只有0%和100%这两个百分比,此时0%和100%可以使用关键字from和to来代替,其中0%对应from,100%对应to
@keyframes mycolor
{
from{color:red;}
to{color:green;}
}
动画名称:animation-name
对哪个css属性操作
持续时间:animation-duration
动画的持续时间
动画方式:animation-timing-function
linear:以匀速过渡。
ease:慢速开始,中间快速,以慢速结束。
ease-in:慢速开始。
ease-out:慢速结束。
ease-in-out:以慢速开始和结束。
延迟时间:animation-delay
单位秒(s/ms)
播放次数:animation-iteration-count
属性取值有两种,一种是“正整数”,另一种是“infinite”。当取值为n(正整数)时,表示动画播放n次,当动画取值为infinite时,表示动画播放无数次,也就是循环播放
播放方向:animation-direction
取值有3个
normal,正方向播放(默认)
reverse 反方向播放
总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。