web前端开发【连载7】-CSS3动画相关属性

今天准备学习一下CSS3关于转换的相关属性,不用说,继续跟着鑫神的脚步前进,不愿做奴隶的人们哈哈哈鑫神不仅技术了得,手绘段子水平也是一流啊,想要整理的比他好真的很难呐~

图片发自简书App

CSS3动画相关的属性
  • transform:变换效果,其作用相当于PS中的ctrl+t自由变换
    transform属性:

rotate 旋转
scale 尺寸放大缩小
skew 倾斜角度
translate移动距离

 transform: skew(35deg); 
 transform:scale(1, 0.5); 
 transform:rotate(45deg); 
 transform:translate(10px, 20px); 
  • transition:过渡效果,其作用就是平滑的改变CSS的值,常用于平滑变化到hover之后的状态
    transform属性:

transition-property : //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration://指定这个过渡的持续时间
transition-delay: //延迟过渡时间
transition-timing-function://指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
其中:linear //线性过度 , ease-in //由慢到快 ,ease-out //由快到慢 ,ease-in-out //由慢到快在到慢

transition:all 2s ease-in-out;
  • animation:创建一段动画然后在规定时间内执行
    animation的属性:

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。infinite无穷的
animation-direction 规定是否应该轮流反向播放动画。

.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

具体实例参照原文:CSS3 Transitions, Transforms和Animation使用简介与应用展示
github代码:https://github.com/Iris-mao/css-tricks/tree/master/picRotate

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,339评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,806评论 0 2
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,896评论 0 4
  • 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。· elemen...
    lovelydong阅读 495评论 0 2
  • 2D、3D变形动画 transform:2D变形:复合属性 通过 CSS3 转换,我们能够对元素进行移动、缩放、转...
    Zd_silent阅读 419评论 0 0