css3动画基础详解(@keyframes和animation)

动画是使元素从一种样式逐渐变化为另外一种效果,CSS3动画的生成,主要依赖@keyframes定义动画,animation执行动画。

@keyframes

通过 @keyframes 规则创建动画。

@keyframes keyframes-name {keyframes-selector {css-styles;}}
keyframes-name 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
keyframes-selector 动画时长的百分比。合法值:
0-100%
from 等效于 0%
to 等效于 100%
css-styles 需要改变的css样式,支持多属性

animation

animation 是一个简写的属性,用于设置6个动画属性:

  • animation-name:这个就是使用@keyframes定义的动画名称;
  • animation-duration:动画执行的时间,以秒为单位
  • animation-delay:规定动画开始之前的延迟
  • animation-iteration-count:规定动画应该播放的次数,n(次数) | infinite(无限次)
  • animation-direction:规定是否应该轮流反向播放动画
  • animation-timing-function:规定动画的速度曲线
@keyframes changeSize {
    0% {
        transform: scale(0.8);            
    }
    50% {
        transform: scale(1.2);            
    }
    100% {
        transform: scale(0.8);            
    }
}

.demo {
    animation-name: changeSize;
    animation-duration: 2s;
    animation-iteration-count:infinite;
}
animation-timing-function

这里说下复杂属性,第一个是animation-timing-function规定动画速度的曲线

说明
ease默认,低速开始,然后加快,结束前变慢
linear从头到尾速度相同
ease-in以低速度开始,先慢后快
ease-out以低速结束,先快后慢
ease-in-out以低速开始和结束
cubic-bezier(x1,y1,x2,y2)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

cubic-bezier:三次赛贝尔曲线函数,前面的几个预设函数都可以通过它来实现。 通过控制曲线上的四个点(起始点(0,0)、终止点(1,1)以及两个相互分离的中间点)来绘制一条曲线并以曲线的状态来反映动画过程中速度的变化。可以访问 cubic-bezier.com 来设置对应的值。

ease 的效果等同于 cubic-bezier(.25,.01,.25,1)

linear 的效果等同于 cubic-bezier(0,0,1,1)

ease-in 的效果等同于 cubic-bezier(.42,0,1,1)

ease-out 的效果等同于 cubic-bezier(0,0,.58,1)

ease-in-out 的效果等同于 cubic-bezier(.42,0,.58,1)

@keyframes dropdown {
    0% {
        top: 0px;
    }
    100% {
        top: 420px;
    }
}

ul li{
    &:first-child{
        animation: dropdown 6s ease infinite;
    }
    &:nth-child(2){
        animation: dropdown 6s linear infinite;
    }
    &:nth-child(3){
        animation: dropdown 6s ease-in infinite;
    }
    &:nth-child(4){
        animation: dropdown 6s ease-out infinite;
    }
    &:nth-child(5){
        animation: dropdown 6s ease-in-out infinite;
    }
    &:last-child{
        animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite;
    }
}
animation-direction

animation-direction 定义是否应该轮流反向播放动画,如果动画次数设置为一次,则无效。

说明
normal默认,正常播放
reverse动画反向播放
alternate交替播放, 动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)反向播放。
alternate-reverse交替播放, 动画会在奇数次数(1、3、5 等等)反向播放,而在偶数次数(2、4、6 等等)正常播放。

我们可以把上面的案例每个都加上alternate的参数,再看下效果,是不是更赞了?

ul li{
    &:first-child{
        animation: dropdown 6s ease infinite alternate;
    }
    &:nth-child(2){
        animation: dropdown 6s linear infinite alternate;
    }
    &:nth-child(3){
        animation: dropdown 6s ease-in infinite alternate;
    }
    &:nth-child(4){
        animation: dropdown 6s ease-out infinite alternate;
    }
    &:nth-child(5){
        animation: dropdown 6s ease-in-out infinite alternate;
    }
    &:last-child{
        animation: dropdown 6s cubic-bezier(.08,.6,.67,1.03) infinite alternate;
    }
}

 旋转

img {
          width: 315px;
          height: 315px;
          animation: circle 10s infinite linear;
          @keyframes circle {
            from {
              transform: rotate(0);
            }

            to {
              transform: rotate(360deg);
            }
          }
        }


//
@keyframes circleAnimate {
    0%{
        opacity: .3;
    }
    100%{
        opacity: 1;
    }
  }

  .l{
        left:0;
        &::before{
            position: absolute;
            width:100%;
            height:100%;
            content: "";
            background: url(./img/l1.min.png);
            animation: circleAnimate 1s ease-in-out 0s infinite;
        }
        &::after{
            position: absolute;
            width:100%;
            height:100%;
            content: "";
            background: url(./img/l1-2.min.png);
            animation: circleAnimate 1s ease-in-out 0.5s infinite;
        }
    }

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值