前端笔记:css3动画transition和animation-阿里云开发者社区

开发者社区> 开发者小助手-bz7> 正文

前端笔记:css3动画transition和animation

简介: 前端笔记:css3动画transition和animation
+关注继续查看

css3动画

分类:

  • 帧动画
  • 过渡动画

CSS3动画属性:

  • transition
  • animation

常用属性

  • transform

动画库:

  • swiper
  • vue-transition

  • animate.css

transition过渡

语法

transition: property duration timing-function delay;

属性名称property


过渡时间duration


时间函数timing-function


延迟时间delay


2、注意:


display不能和transition一起使用


transition后面尽量不要跟all


常见闪动可以persp和backface-visibility


.box{
    width: 200px;
    height: 200px;
    background-color: #000000;
    margin-bottom: 20px;
}

// 鼠标经过变化宽度
.trasition-1{
    // transition: width 2s linear 1s;
    transition: width 2s linear;

    &:hover{
        width: 500px;
    }
}

// 鼠标经过旋转
.trasition-2{
    transition: transform 2s ease-out;

    &:hover{
        transform: rotate(45deg);
    }
}

animation动画

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

动画名称(name)@keyframes

过渡时间(duration)

时间函数(timing-function)

延迟时间(delay)

播放次数(iteration-count)

播放方向(direction)轮流播放和反向播放

停止播放的状态(fill-mode)

是否暂停(play-state)

.box{
    width: 200px;
    height: 200px;
    background-color: #000000;
    margin-bottom: 20px;
}

// 鼠标经过移动
.animation-1{
    &:hover{
        animation: move 2s linear;
    }
}

@keyframes move{
    100%{
        transform: translateX(200px);
    }
}

// 小球滚动
.animation-2{
    border-radius: 50%;
    animation: jump 2s cubic-bezier(0.4,-0.04, 0.94, 0.29) infinite;
}

@keyframes jump{
    0%{
        transform: translateX(0px);
    }
    40%{
        transform: translateX(200px);
    }
    60%{
        transform: translateX(200px);
        clip-path: ellipse(50% 50% at 50% 50%);
    }
    100%{
        transform: translateX(0px);
        clip-path: ellipse(50% 45% at 50% 48%);
    }
}

// 菊花图旋转
.animation-3{
    width: 100px;
    height: 111px;
    animation: round 1s steps(12) infinite;
    background: url(./loading.jpg) no-repeat;
}


@keyframes round{
    100%{
        transform: rotate(360deg);
    }
}

时间函数

时间函数:管理动画在单位帧内播放的速度曲线

三次贝塞尔函数的数学函数

预设值:

  • linear 匀速
  • ease
  • ease-in
  • ease-out
  • ease-in-out

steps作用是每一个关键帧,而不是整个时间

过渡和动画在js中的监听

animationstart

animationend

trasitionend

animationitertion


// 过渡事件监听
let transitionend = ()=>{
    console.log("transitionend");
}
let $box = document.querySelector('.trasition-1');
// IE FireFox已经支持
$box.addEventListener("transitionend", transitionend);
// 360 safari chrome下需要兼容处理
$box.addEventListener("WebkitTransitionend", transitionend);

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C 语言项目_项目流程|学习笔记
快速学习 C 语言项目_项目流程
6 0
mysql事务隔离级别
mysql事务隔离级别
11 0
SpringBoot时间格式化的5种方法!(9)
SpringBoot时间格式化的5种方法!(9)
6 0
SpringBoot时间格式化的5种方法!(2)
SpringBoot时间格式化的5种方法!(2)
4 0
Bootstrap 起步|学习笔记
快速学习 Bootstrap 起步
7 0
SpringBoot时间格式化的5种方法!(3)
SpringBoot时间格式化的5种方法!(3)
8 0
详解使用VueJS开发项目中的兼容问题
详解使用VueJS开发项目中的兼容问题
13 0
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
前后端分离 -- 深入浅出 Spring Boot + Vue 实现工程项目进度管理系统 Vue不过如此~
9 0
696
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载