分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

CSS动画样式

发布时间:2023-09-06 01:37责任编辑:苏小强关键词:CSS动画

transform:对对象属性进行动画编辑(可用于有渐变效果的动画)

一、transition:动画的过度效果

注:始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition的属性值及其用法:

1.transition-property  规定设置过渡效果的 CSS 属性的名称。

2.transition-duration  规定动画过度需要的时间

3.transition-timing-function  动画的过度曲线

注:linear:用于相同速度开始至结束的过渡效果

4.transition-delay  动画何时开始

二、translate:动画的平移效果

属性值可加X Y Z 点的坐标

transform:translateX(50px)     //向右平移50px

三、scale:动画的旋转

transform:rotate(9deg)   //旋转9度

具体事例

用transform设置图片的缓慢进入

 var  obj=documen.getElementByClassName("classname")[0];

   obj.setAttribute("class",obj.getAttribute("class")+" classname2");







CSS动画样式

原文地址:https://www.cnblogs.com/diverman/p/8298254.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved