在Semantic-UI中定义了很多图片动画效果，可以直接使用。
示例：定义图片动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN导入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.blue.button").on("click",function () {
$("#img").transition("fade");
})
})
</script>
<style>
#img{
15%;
height: 15%;
}
</style>
</head>
<body style="padding: 20px;">
<!-- 定义图片动画 -->
<img src="../images/pic.png" id="img">
<button class="ui blue button">查看</button>
</body>
</html>