关于css3过渡、动画、变换的新特性

过渡

css3 添加了很多新特性,这里,对过渡、动画、2d变换 加粗样式进行小结。
在浏览器中,过渡效果一般是由浏览器直接改变元素的css属性实现。
过渡使用也有一定范围,比如在最开始页面加载时浏览器不会应用过渡,而是直接反映的时没有过渡的样式。在后期触发后才会有过渡的效果出现。

过渡属性

  • transition-property 指定应用过渡的属性,值用字符串表示。
  • transition-duration 指定过渡一次周期时间,值用时间表示。
  • transition-timing-Function 指定过渡动画的运动曲线,默认为ease。
  • transition-delay 指定过渡开始之前的延迟时间,值用时间表示。
  • transition 上面的缩写,格式如下:
    transition: (transition-property) (transition-duration) (transition-timing-Function) (transition-delay)
过渡提示
  • 什么是指定过渡?
    就是在过渡周期中,需要改变的css样式,比如 background-color,padding,color,width…
    其实,如果transform:rotate(360deg);可以使用
    transition-property:transform。这是很神奇的应用。

  • 什么是过渡曲线?
    就是在过渡周期中,过渡 “运动效果” 呈现的速度。
    默认值为ease, (first) 慢 —> (medium) 快 —> (end) 慢;
    个人建议使用 linear(匀速)。

  • 注意:建议在主流浏览器中使用带有厂商前缀。

    • 在safari 浏览器: -o 或 -webkit-transition-furation:0.3s;
    • 在Chrome 浏览器: -webkit-transition-furation:0.3s;
    • 在firefox 浏览器:-moz-transition-furation:0.3s;
      有时候我们在hover中给标签添加过渡,结果开始好好的,一旦移开过渡效果立即变回原来的样式,极大影响美感。这个问题该怎样解决呢?

使用反向过渡

由于在页面中过渡常被局部使用效果往往时平缓平滑的。那是因为在过渡中使用了反向过渡。即常见的过渡几乎是成对出现的。中间的平滑平缓效果使用的是延时和过渡周期。

.box{
    -webkit-transition-delay:150ms;
    -webkit-transition-duration:300ms;
}
.box:hover{
    width: 400px;
    -wbkit-transition-propety:width;
    -webkit-transition-delay:150ms;
    -webkit-transition-duration:300ms;
}

动画

什么是动画?动画就是使用css让元素发生位置、方向、颜色、大小、运动快慢等由原来的初始状态变为设置后的默认状态。
不是过渡吗?有啥区别?
区别就是css动画本质上是增强的过渡。在过渡中,只有开始状态和结束状态,而动画,不好意思,过渡有的动画全有,而动画有的过渡没有。
来,上干货了。

动画的属性

  • animation-delay 设置动画的延迟时间,值为时间
  • animation-duration 设置动画的一次完整运动周期,值为时间
  • animation-timing-Function 设置动画的运动曲线
    上面是不是很熟悉?没错,和过渡没有区别,真正的区别现在开始了。
  • animation-name 设置动画的名称
  • animation-direction 设置动画该整个周期运动的方向,值为normal alternate
  • animation-iteration-count 设置动画的播放次数,值为 正整数 、infinite
  • animation-play-state 设置动画是否允许暂停和重新播放,值为running paused
  • -webkit-animation-fill-mode: both; 设置动画的结束状态,值为none both forwards
  • animation 设置动画的简写,属性的格式如下:
    animation: (animation-name) (animation-duration) (animation-timing-Function) (animation-delay) (animation-direction-count)
动画的提示
  • animation-direction 的值为normal 或者是 alternate
    normal 每次重复都向前播放,如果可重复播放多次,每次动画都恢复初始状态,从头开始播放
    alternate 动画先向前播放,然后反方向播放。当然,这个和预定播放次数有关

  • 动画和过渡相比,动画的一个优势是可以将动画应用到页面的初始布局,一旦页面加载完成,动画就会发生,而过渡只有等触发才能完成等。

  • 动画可以重用关键帧@keyframes xxx(动画名),也就是在多个选择器中添加相同动画。

如何生成动画效果

动画由两部分定义组成,第一部分包含在样式声明中,第二部分包含动画运动的属性变化
上述动画的属性是在style 中声明在css选择器样式中,只是声明了动画的样式,却缺少动画变化过程中哪些属性是需要变化的,上面并没有交待。所有,这时候我们就会有了第二部分-----动画创建、定义应用动画的属性。绕口不?再细些。
一个动画的完成需要两部分组成第一部分为动画的声明样式(规则),声明该动画的周期时长、速度快慢、运动暂停状态等。而第二部分就是为了结合 动画的声明样式(第一部分),来创建动画的运动时的样式属性变化,如background-color:red、color:blue、width:400px等的表现样式。现在是否清晰了些?
其实这时候你就会问:为什么不一起写,这样就不用分开岂不是更明白?
其实这个问题很简单,如果一个动画上面有多个重复的样式,而下面又有一个兄弟等着用几乎一模一样的动画样式,这个兄弟过后,你以为差不多了,结果一回头,猛然发现还有一批人等着呢,而他们的需求有相同的,又有不同的,这时后动画被分成两部分这个思想是多么的明智。

创建动画

在上述的动画属性中给了动画的规则,接下来就是动画的定义应用属性。
使用 @keyframes 关键帧创建动画。

    @keyframes XXX(动画名称){
        form(动画的初始状态){
            初始样式
        }
        to(动画的结束状态){
            结束样式
        }
    }

或者是这样:

.box{
    animation xxx(动画名);
}

    @keyframes xxx(动画名){
        0%{
            初始样式
        }
        25%{
            当周期时间走到 25% 的时候的样式
        }
        100%{
            结束样式
        }
    }

其中,to{} 和 100% 必须要有意义值,同时,动画名要一致。
在动画中,必不可少的是属性是:
animation-name 、animation-furation 、 @keyframes xxx(动画名){ to{ } }

  • 提示:在动画的声明中,可以添加多个已经创建的动画名,但如果发生动画属性重复,后面的流会覆盖前面的相同样式属性的值。

变换

变换的关键字为transform,何为变换?它是 什么?
变换就是一种为 元素应用 的 动画效果,这个属性的值是一组预定义的函数。
它很抽象,就是我们口中所说的2D 3D效果。

变换属性

先说2D的transform属性,在下列的属性值中都有两个值,分别是X轴上的值 和 Y轴上的值

  • transform: translate() 在水平方向、垂直方向平移参数单位个位置

  • transform: translateX() 在水平方向上移动参数单位个位置

  • transform: translateY() 在垂直方向上移动参数单位个位置

  • transform: rotate() 相对于屏幕的旋转角度,正值为顺时针,负值为逆时针

  • transfrom: scale() 在水平方向、垂直方向缩放倍数,负值无效

  • transform: scaleX()

  • transform: scaleY()

  • transform:skew() 在X轴,Y轴旋转的参数角度,记住,沿着x轴、和y轴旋转

  • skewX()

  • skewY()
    以上就是常见的2D动画变换的属性值,还有些特殊的,

  • matrix() 指定自定义变换,

  • 建议网址[变换属性 matrix() 更详细的描述]https://blog.csdn.net/weixin_42103959/article/details/81044389

  • -moz-transform-origin:(left center right) (top center bottom) 指定应用变换的起点,默认就是中心点。

  • 注意:在应用中,往往结合过渡和动画实现更好的复杂效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值