HTML

      <div>
<div style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
</div>

CSS

            #animat{
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-direction:alternate;/*轮流反向播放动画。*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
} } @-webkit-keyframes mymove /*Safari and Chrome*/
{
%{
transform: scale(); /*开始为原始大小*/
}
%{
transform: scale(1.1); /*放大1.1倍*/
}
%{
transform: scale();
}
%{
transform: scale(1.1);
}
}

CSS3实现放大缩小动画的更多相关文章

  1. keyframes 放大缩小动画

    本次项目中动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infi ...

  2. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  3. CSS3圆圈动画放大缩小循环动画效果

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. css3 放大缩小代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  6. css3 animation(左右摆动) (放大缩小)

    左右摆动: @-webkit-keyframes roundRule{ 0%, 100%{ -webkit-transform: rotate(-15deg); } 50%{ -webkit-tran ...

  7. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  8. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  9. css3 制作平滑过度动画

    -webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pr ...

随机推荐

  1. 添加安卓端的User-Agent

    将系统换为Android即可 随机UA UA分析网站 Mozilla/5.0 (Windows NT 6. 4; WOW64) AppleWebKit/537. 36 (KHTML, like Gec ...

  2. 吴裕雄 PYTHON 神经网络——TENSORFLOW 学习率的设置

    import tensorflow as tf TRAINING_STEPS = 10 LEARNING_RATE = 1 x = tf.Variable(tf.constant(5, dtype=t ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:堆叠的水平

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 显ipQQ

    链接:https://pan.baidu.com/s/1l1WN4b3jT8n4e66DH8d-cg 提取码:kjm4

  5. faster-RCNN 加入新的Ground Truth

    出于project的需要,不仅要detect和classify对象,还希望建立不同class的对象之间的关系,进行所谓的pair-matching. 需要完成以下几步: 1. dataset中labe ...

  6. 关于sarima模型的描述,时间序列的理论与方法(第二版)(美 布洛克威尔)有一部分比较值得看

  7. github日常的基本命令

    git 常用命令 git clone 仓库地址 -从远端克隆项目 git pull -从远端拉取代码 git pull -p -从远端拉取代码和分支 提交代码流程: git add xxx -添加到暂 ...

  8. PAT T1013 Image Segmentation

    krustral算法加并查集,按题给要求维护并查集~ #include<bits/stdc++.h> using namespace std; ; const int inf=1e9; i ...

  9. Codeforces Round #617 (Div. 3)A. Array with Odd Sum(水题)

    You are given an array aa consisting of nn integers. In one move, you can choose two indices 1≤i,j≤n ...

  10. Windows远程“要求的函数不受支持”解决办法

    解决方法: 开启组策略中远程桌面链接安全层.1.开始-运行-gpedit.msc,进入组策略编辑器:2.找到左侧边栏计算机配置-管理模板-Windows组件-远程桌面服务-远程桌面会话主机-安全项:3 ...